user3953989 user3953989 - 7 months ago 42
jQuery Question

Set image src and location to mouse on mouse over/enter

I have a list I'm building dynamically and want to show an image on mouse enter/over of the related list item.

OnmouseOver seems to fire multiple times and the src property does change but the image doesn't show in the browser.

This is what I currently have.

function showImage(e, src) {
$("#imageContainer").css("left", e.pageX);
$("#imageContainer").css("top", e.pageY);
$("#itemImage").attr("src", src);

function hideImage() {
$("#itemImage").attr("src", "");

@foreach (var item in Model.items)
string imageUrl = ""+ item.ImageName;

<a href="#" onmouseover="showImage(event, @imageUrl)" onmouseout="hideImage()">@item.Name</a>

<div id="imageContainer" style="display: none; position: absolute;">
<img class="itemImage" src="#" />


You are using id selector for 'itemImage' which is actually a class.You need to use class selector.

Change :

$("#itemImage").attr("src", src);
$("#itemImage").attr("src", "");


$(".itemImage").attr("src", src);
$(".itemImage").attr("src", "");