i have list i'm building dynamically , want show image on mouse enter/over of related list item.
onmouseover seems fire multiple times , src property change image doesn't show in browser.
this 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>
you using id selector 'itemimage' class.you need use class selector.
change :
$("#itemimage").attr("src", src); $("#itemimage").attr("src", ""); to
$(".itemimage").attr("src", src); $(".itemimage").attr("src", ""); 