I recently came across the mouse over script below on a website, and I must say it works really well and is very easy to use. The only issue I have with it is the placement of the image. Currently, the image follows the cursor as it moves.
Question: Is there a way to make the image appear centered on the screen and fixed in that position while hovering over the text?
Here is the script:
var offsetX = 180;
var offsetY = -25;
$('a').hover(function(e) {
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '" alt="big image" />')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});
$('a').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});
This is the CSS style:
#largeImage {
position:absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #BFBFBF;
color:#aa1416;
}
HTML:
<div class="largeImage">
<li><h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2>
</div>