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. I only mention it because some developers (including me when I started) have an aversion to JS event handling. 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. You may want to expand upon this idea further by preLoading the larger images. 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 can change the "+1" in the last two lines to whatever you like to place the image correctly in relation to the cursor. Just add an onMouseOut event to hide the bigImg image again. Var curCursorY = e.clientY + ĭocument.getElementById('bigImg').style.top = curCursorY + 1 ĭocument.getElementById('bigImg').style.left = curCursorX + 1 Īnd that should just about do it. This would be something like the following: //Get the mouse position on IE and standards compliant browsers. 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 function must do three things:ġ) Load the actual image file into the hidden image //I'll leave it up to you to get the right image in there.ĭocument.getElementById('bigImg').src = xxxxxxxx Ģ) Position the hidden image //See below for what to put in place of the xxxx's here.ĭocument.getElementById('bigImg').style.top = xxxxxxxx ĭocument.getElementById('bigImg').style.left = xxxxxxxx ģ) Make the hidden image appear document.getElementById('bigImg').style.display = 'block' ĭocument.getElementById('bigImg').style.visibility = 'visible' Then you need an onMouseOver function for your thumbnail. In my examples I'll assume you did something similar to the following: The former may be easier if you are a JS novice. 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. But I note that you didn't mention jquery anywhere in your post and all of those answers dealt with that. The previous answers may be exactly what you're looking for, and you may already have this solved.
0 Comments
Leave a Reply. |