Enlarge the image and move it with the mouse.

Question

Sorry if this may seem trivial for me to ask, but ..

I have several images, and I need to enlarge them when I hover over them. But .. I want the enlarged image to stand next to the pointer when I move it around the image. I don’t know what to call it. I am pretty sure this is only done with javascript, just css will not work here.

Something like http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ , but you know that it has to move with a moving pointer.

What is the most effective way to do this?

Answer 1

The previous answers may be exactly what you are looking for, and you may have already decided this. But I note that you did not mention jquery anywhere in your post, and all these answers related to this. So for a clean JS solution ...

I assume that the question was formulated so that you already know how to pop up an image? This can be done by encoding an absolutely positioned hidden img tag in html or generated "on the fly" using JS. The first may be simpler if you are new to JS. In my examples, I assume that you did something similar to the following:

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

Then you need the onMouseOver function for your sketch. This function should perform three functions:

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) Put a hidden image

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

3) Display the latent image

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

Then you will need to capture the onMouseMove event and update the position of the non-hidden image accordingly, using the same code that you would use in (2) above to place the image. It will look something like this:

 //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 was just to do it. Just add the onMouseOut event to hide the BigImg image again. You can change the +1 in the last two lines so that you correctly position the image relative to the cursor.

Please note that all of the above code is for demonstration purposes only; I have not tested any of them, but it should help you on the right track. You can expand this idea further by preloading large images. You can also refuse to capture mousemove events by using setTimeout to update the position every 20 ms or so, although I find this approach more complex and less desirable. I only mention this because some developers (including me when I started) are averse to handling JS events.

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

Good luck

Answer 2

The Liece solution is close, but will not achieve the desired effect of a large image following the cursor.

Here is the 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); }); }); 

HTML:

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

CSS

 img { position: absolute; } 

Answer 3

Try these links [jquery with auto positioning]

1.Simple

http://jquery.bassistance.de/tooltip/demo/

2. Good forum

http://flowplayer.org/tools/tooltip/index.html

Answer 4

If you correctly understood that you want to place your large image relative to the cursor. One solution in jquery (I'm not 100% sure of the code here, but there is logic):

 $('.thumb').hover(function(e){ var relativeX = e.pageX - 100; var relativeY = e.pageY - 100; $(.image).css("top", relativeY); $(.image).css("left", relativeX); $(.image).show(); }, function(){ $(.image).hide(); }) 

Answer 5

JQuery is the easiest route. position absolute is the key.

Answer 6

^ In addition to the above, here is a working JS script. Visit: jsfiddle.net/hdwZ8/1/

It has been roughly edited, so it does not use only the common IMG css tags, which are easy for everyone to use with this now.

I use this script instead of Lightbox on my Wordpress client site, quick zoom with mouse is much better than IMO. It’s very efficient to create effective galleries, especially with the AdvancedCustomFields plugin and in WP Retector loops!