user3953989 user3953989 - 5 months ago 22
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);
$("#imageContainer").show();
$("#itemImage").attr("src", src);
}

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

@foreach (var item in Model.items)
{
string imageUrl = "test.com/images/"+ item.ImageName;

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

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

Answer

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", "");

to

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