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!
I haven’t realized no one has answered this question.
In case there’s someone who may find it useful, here it is:
In the original JS, change this:
When I used offset(), it calculates the offset form the window left and top sides, so the coordinates of the image(s) went far down and right.
When using position() it takes the left and top from the offset parent so it shouldn’t go far down or right and do the fade in the same place as the original image.
But in the jq.imghover1.1.js there’s another thing to change:
This could become a better implementation of this plugin, I mean, adding the position or offset value for the imghover, as a parameter when you call the script. I’ll try to do it myself.