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.

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.

• javascript
• jquery
• html
• css

4 Answers 4

From you original question and this ment ("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/YPu96/1/

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

On click: The image bees 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();
});

You definitely don't need to use javascript. This works on the latest version of Chrome, use vendor prefixing for transitions.

http://jsfiddle/pKYu2/16/

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <span id="mouseOver"><img src="http://placekitten./120/120">Mouse Over This</span>     
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

#mouseOver {
    display: inline;
    position: relative;
}

#mouseOver img {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 1em;
    opacity: 0;
    pointer-events: none;
    transition-duration: 800ms;    
}

#mouseOver:hover img {
    opacity: 1;
    transition-duration: 400ms;
}

You can use the hover event:

$("div").hover(function() {
    $("img").show();
}, function() {
    $("img").hide();
});

http://jsfiddle/pKYu2/2/

This will replace text

$(document).ready(function(){
   $('#mouseOver').mouseover(function(e){
        $('#imageReplace').empty()
        $('#imageReplace').append("<img src=\"http://placekitten./120/120\" />"); 
    })
})

The empty function isn't really necessary, but I find to be good practice, as it's very easy to forget to unbind events from the DOM if you don't make liberal use of .empty and .remove