enlarge image and move it with the pointer on mouse over

Question

Sorry if this might seem trivial for me to ask but..

I have some images and I need them to enlarge when I hover my mouse over them. But.. I want for the enlarged image to stick next to the pointer as I move it across the image. I don't know what to call it. I'm pretty sure it's only done with javascript, just css won't work here.

Something like this http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ , but you know, it has to move with the pointer in motion.

What's the most effective way to do this?

Answer 1

The previous answers may be exactly what you're looking for, and you may already have this solved. But I note that you didn't mention jquery anywhere in your post and all of those answers dealt with that. So for a pure JS solution...

I'll assume from the way the question was phrased that you already know how to pop the image up? This can be done by coding an absolutely positioned hidden img tag in the html or generated on the fly with JS. The former may be easier if you are a JS novice. In my examples I'll assume you did something similar to the following:

<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">

Then you need an onMouseOver function for your thumbnail. This function must do three things:

1) Load the actual image file into the hidden image

//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;

2) Position the hidden image

//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;

3) Make the hidden image appear

document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';

Then you'll need to capture the onMouseMove event and update the now un-hidden image's position accordingly using the same code you would have used in (2) above to position the image. This would be something like the following:

//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
    var curCursorX = e.pageX;
    var curCursorY = e.pageY;
} else {
    var curCursorX = e.clientX + document.body.scrollLeft;
    var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;

And that should just about do it. Just add an onMouseOut event to hide the bigImg image again. You can change the "+1" in the last two lines to whatever you like to place the image correctly in relation to the cursor.

Note that all of the code above was for demonstration purposes only; I haven't tested any of it, but it should get you on the right track. You may want to expand upon this idea further by preLoading the larger images. You could also forgoe capturing mousemove events by using setTimeout to update the position every 20 ms or so, though I think that approach is more complicated and less desirable. I only mention it because some developers (including me when I started) have an aversion to JS event handling.

I did something similar to this with a custom ColdFusion tag I wrote that would generate a floating div users could click and drag around the screen. Same principle. If you need me to I can dig that out to answer any additional questions in more depth.

Good luck!

Answer 2

Liece's solution is close, but won't achieve the desired effect of the large image following the cursor.

Here's a solution in jQuery:

  $(document).ready(function() {
    $("img.small").hover (function () {
      $("img.large").show();
    }, function () {
      $("img.large").hide();
    });

    $("img.small").mousemove(function(e) {
      $("img.large").css("top",e.pageY + 5);
      $("img.large").css("left",e.pageX + 5);
    });
  });

The HTML is:

<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">

CSS:

img { position: absolute; }