Help solving jq.imghover1.1 problem when container for images is absolute positioned!!

I'm working in a site with the plugin jq.imghover1.1.js for jquery. The plugin works great almost in any circumstances, but I did a position:absolute for a div that contains the images that will be affected by the plugin and now when the plugin fade the hover images in, they do it far to the right of the original button.

The Code:

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

.container {
width: 1004px;

margin: 0 auto; display: table;}

.top {

height: 140px; position: absolute; top: 0px; left: 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>

The 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);

The whole problem is that when you hover the button, the imghover hovers an image on top of the original one, calculating the distance from left of the screen to position the hovering image. When you do a position:absolute div as container for the images that will be affected by the imghover, the calculations for the positioning of the hovering image keeps the same unless you add a left: Xpx, which helps the imghover calculating the left distance, but as you could see, the container has no left: Xpx declared so the imghover take for granted the position from the left of the screen, then adds it to its declaration and I end up with a hovering image about 300px far right than needed.

Any idea will be great!

ansaurus

tags:

views:

answers:

Help solving jq.imghover1.1 problem when container for images is absolute positioned!!

related questions