Помогите решить проблему с jq.imghover1.1, когда контейнер для изображений имеет абсолютное позиционирование!

Я работаю на сайте с плагином jq.imghover1.1.js для jquery. Плагин отлично работает почти при любых обстоятельствах, но я сделал position:absolute для div, содержащего изображения, на которые будет влиять плагин, и теперь, когда плагин постепенно затухает при наведении, они делают это далеко справа от оригинальная кнопка.

Код:

<html>
<head>
<style type="text/css">

.container {
width: 1004px;

поле: 0 авто; отображение: таблица;}

.top {

высота: 140 пикселей; положение: абсолютное; верх: 0px; слева: 0px;}

<script type="text/javascript"

$(document).ready(function(){
        $('img.on').imghover({suffix: '_b',fade: true,fadeSpeed: 400});
    });

</script>
</head>
<body>

<div class="container top">
    <div class="mainmenu">
    <img alt="acerca de" height="53" src="images/mm-acercade.jpg" width="117" class="on" />
    </div>
</div>
</body>
</html>

JS:

/**
 *  jquery.popupt
 *  (c) 2008 Semooh (http://semooh.jp/)
 *
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 **/
(function($){
 $.fn.extend({
  imghover: function(opt){
   return this.each(function() {
        opt = $.extend({
            prefix: '',
            suffix: '_o',
            src: '',
            btnOnly: true,
            fade: false,
            fadeSpeed: 500
          }, opt || {});

        var node = $(this);
    if(!node.is('img')&&!node.is(':image')){
          var sel = 'img,:image';
          if (opt.btnOnly) sel = 'a '+sel;
          node.find(sel).imghover(opt);
          return;
        }

        var orgImg = node.attr('src');

        var hoverImg;
        if(opt.src){
          hoverImg = opt.src;
        }else{
          hoverImg = orgImg;
          if(opt.prefix){
            var pos = hoverImg.lastIndexOf('/');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos-1)+opt.prefix+hoverImg.substr(pos-1);
            }else{
              hoverImg = opt.prefix+hoverImg;
            }
          }
          if(opt.suffix){
            var pos = hoverImg.lastIndexOf('.');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos)+opt.suffix+hoverImg.substr(pos);
            }else{
              hoverImg = hoverImg+opt.suffix;
            }
          }
        }

        if(opt.fade){
          var offset = node.offset();
          var hover = node.clone(true);
          hover.attr('src', hoverImg);
          hover.css({
            position: 'absolute',
            left: offset.left,
            top: offset.top,
            zIndex: 1000
          }).hide().insertAfter(node);
          node.mouseover(
            function(){
              var offset=node.offset();
              hover.css({left: offset.left, top: offset.top});
              hover.fadeIn(opt.fadeSpeed);
              node.fadeOut(opt.fadeSpeed,function(){node.show()});
            }
          );
          hover.mouseout(
            function(){
              node.fadeIn(opt.fadeSpeed);
              hover.fadeOut(opt.fadeSpeed);
            }
          );
        }else{
          node.hover(
            function(){node.attr('src', hoverImg)},
            function(){node.attr('src', orgImg)}
          );
        }
   });
  }
 });
})(jQuery);

Вся проблема в том, что когда вы наводите кнопку, imghover наводит изображение поверх исходного, вычисляя расстояние от левого края экрана до положения наведенного изображения. Когда вы делаете position:absolute div в качестве контейнера для изображений, которые будут затронуты imghover, вычисления для позиционирования зависшего изображения остаются прежними, если вы не добавите left: Xpx, который помогает imghover вычислять расстояние слева, но, как вы можете видеть, у контейнера нет левого края: объявлено Xpx, поэтому imghover принимает как должное положение слева от экрана, затем добавляет его к своему объявлению, и в итоге я получаю парящее изображение примерно на 300 пикселей вправо, чем нужно.

Любая идея будет отличной!


image css hover jquery-plugins
person Billeeb    schedule 17.11.2009    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не понял, что никто не ответил на этот вопрос. Если вдруг кому пригодится, вот:

В исходном JS измените это:

if(opt.fade){
          // change from this: var offset = node.offset();
          var offset = node.position();
          // so the positioning is absolute related to the parent;
          var hover = node.clone(true);
          hover.attr('src', hoverImg);

Когда я использовал offset(), он вычисляет смещение от левой и верхней сторон окна, поэтому координаты изображений уходят далеко вниз и вправо.

При использовании position() он берет левую и верхнюю часть от родителя смещения, поэтому он не должен уходить далеко вниз или вправо и выполнять затухание в том же месте, что и исходное изображение.

Но в jq.imghover1.1.js нужно изменить еще одну вещь:

function(){
              var offset=node.offset();
// original   hover.css({left: offset.left, top: offset.top});
              hover.css({left: offset, top: offset});
// if you keep the .left and .top data then the positioning will fail.
              hover.fadeIn(opt.fadeSpeed);

Это могло бы стать лучшей реализацией этого плагина, я имею в виду добавление значения положения или смещения для imghover в качестве параметра при вызове скрипта. Я попробую сделать это сам.

person Billeeb    schedule 24.11.2010