Tuesday, May 28, 2024
 Popular · Latest · Hot · Upcoming
23
rated 0 times [  24] [ 1]  / answers: 1 / hits: 21396  / 10 Years ago, sat, july 19, 2014, 12:00:00

I need some help.
I want to make an image appear where the mouse is located over a div.
There is no code that I can show as I've failed many times at achieving this.



Thanks.


More From » jquery

 Answers
33

From you original question and this comment (Hello, thanks for the reply. The image needs to pop up over the div about the mouse point. Moving the mouse changes the image location to where the mouse is. Thanks though!)



I created this solution:



http://jsfiddle.net/YPu96/1/



Hover over div: The image becomes visible and follows the mouse-pointer.



On click: The image becomes invisible and stops following.



HTML:



<div class=someDiv>
<p>Foobar</p>
</div>
<img style=display:none class=image src=http://www.budick.eu/images/logo-BudickEu.jpg/>


JavaScript:



$(.someDiv).hover(function() {
$(document).mousemove(function(event) {
$(.image).css({position:absolute,left:event.clientX ,top:event.clientY }).show();
});
});

//end movement with click
$(document).bind(click,function(){
$(document).unbind(mousemove);
$(.image).hide();
});

[#70136] Thursday, July 17, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
everett

Total Points: 317
Total Questions: 112
Total Answers: 109

Location: Philippines
Member since Sat, Jul 11, 2020
4 Years ago
;