Show Large Image on MouseOver using JavaScript
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="LargeImage.aspx.vb" Inherits="sample_LargeImage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="ecmascript">
function ShowBiggerImage(obj)
{
document.getElementById("LargeImageContainerDiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";
}
function ShowDefaultImage(obj)
{
document.getElementById("LargeImageContainerDiv").innerHTML = "";
}
function move_Area(event)
{
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;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" Width="60px" Height="80px" ImageUrl="../ImageStorage/0.gif" onmouseover="ShowBiggerImage(this);" onmouseout="ShowDefaultImage(this);"/>
</div>
<div id="LargeImageContainerDiv" style="position: absolute; z-index:2"></div>
</form>
</body>
</html>
Comments
Post a Comment