Definition:
OnMouseHover show large image.
Example:
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">
<title>On mousehover show large image</title>
<script type="text/javascript" language="ecmascript">
function ShowBiggerImage(obj)
{
document.getElementById("LargeImageDiv").innerHTML = "<img src='" + obj.src + "'+'width=350 height=500' >";
}
function ShowDefaultImage(obj)
{
document.getElementById("LargeImageDiv").innerHTML = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="LargeImageDiv" style="position: absolute; z-index:2">
</div>
<table align="center" frame="box" style="border: thin solid #660033; table-layout: fixed">
<tr>
<td>
<div align="center">
<asp:Image ID="Image1" runat="server" Width="80px" Height="100px"
ImageUrl="~/Images/cutebird.png"
onmouseover="ShowBiggerImage(this);"
onmouseout="ShowDefaultImage(this);"/>
</div>
</td>
<td></td>
<td>
<div align="center">
<asp:Image ID="Image2" runat="server" Width="80px" Height="100px"
ImageUrl="~/Images/snowtwt.png"
onmouseover="ShowBiggerImage(this);"
onmouseout="ShowDefaultImage(this);" />
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<asp:Image ID="Image3" runat="server" Width="80px" Height="100px"
ImageUrl="~/Images/springtwt.png"
onmouseover="ShowBiggerImage(this);"
onmouseout="ShowDefaultImage(this);" />
</div>
</td>
<td></td>
<td>
<div align="center">
<asp:Image ID="Image4" runat="server" Width="80px" Height="100px"
ImageUrl="~/Images/summertwt.png"
onmouseover="ShowBiggerImage(this);"
onmouseout="ShowDefaultImage(this);" />
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<asp:Image ID="Image5" runat="server" Width="80px" Height="100px"
ImageUrl="~/Images/twt.png"
onmouseover="ShowBiggerImage(this);"
onmouseout="ShowDefaultImage(this);"/>
</div>
</td>
<td></td>
<td>
<div align="center" >
<asp:Image ID="Image6" runat="server" Width="80px" Height="100px"
ImageUrl="~/Images/flytwt.png"
onmouseover="ShowBiggerImage(this);"
onmouseout="ShowDefaultImage(this);" />
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
 |
| It will look like this. |
No comments:
Post a Comment