Friday, December 2, 2011

Mouse over Event (image), when u move over the image display the another image using Javascript

<
<
html xmlns="http://www.w3.org/1999/xhtml">head runat="server">
</
<
<title></title>head>body><form id="form1" runat="server"><div><asp:Image ID="Image1" runat="server" Width="60px" Height="80px" ImageUrl="~/Lighthouse.jpg" onmouseover="ShowBiggerImage(this);" onmouseout="ShowDefaultImage(this);"/></div><div id="LargeImageContainerDiv" style="position: absolute; z-index:2"></div></form><script type="text/javascript" language="ecmascript">
document.getElementById(
}

document.getElementById(
}

event = event || window.event;
LargeImageContainerDiv.style.left = event.clientX + document.body.scrollLeft + 10;
LargeImageContainerDiv.style.top = event.clientY + document.body.scrollTop + 10;
}
document.onmousemove = move_Area;


</
</
function ShowBiggerImage(obj) {"LargeImageContainerDiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";function ShowDefaultImage(obj) {"LargeImageContainerDiv").innerHTML = "";function move_Area(event) {</script>body>html>

No comments:

Post a Comment