Hi Vinod,
I have created effect like
Google Image Search using little bit of
Java Script code.
Note: You have to modify image path that is exists in your application.
Here is code snippet:
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.minizeStyle
{
height: 70px;
width: 70px;
}
.maximizeStyle
{
height: 200px;
width: 200px;
position: absolute;
border: 1px dotted black;
}
</style>
<script language="javascript" type="text/javascript">
function doHoverImage() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].onmouseover = maximizeImage;
images[i].onmouseout = minimizeImage;
}
}
function maximizeImage() {
this.className = "maximizeStyle";
}
function minimizeImage() {
this.className = "minizeStyle";
}
</script>
</head>
Above example i have created a
Style and JavaScript function for
Maximize and
Minimize effect.
<body onload="doHoverImage();">
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="2" cellspacing="2">
<tr>
<td>
<img src="Images/1.jpg" alt="1.jpg" class="minizeStyle" />
</td>
<td>
<img src="Images/2.jpg" alt="2.jpg" class="minizeStyle" />
</td>
<td>
<img src="Images/3.jpg" alt="3.jpg" class="minizeStyle" />
</td>
</tr>
<tr>
<td>
<img src="Images/4.jpg" alt="4.jpg" class="minizeStyle" />
</td>
<td>
<img src="Images/5.jpg" alt="5.jpg" class="minizeStyle" />
</td>
<td>
<img src="Images/6.jpg" alt="6.jpg" class="minizeStyle" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
I have just call java script function on
body load. This function will get all the images from the page and it will dynamically assign effect to each images, so you don't wont to add function to every images.
Please do let me know, if you have any doubt.
Please provide
Vote if this would be helpful to you.
Thanks,
Imdadhusen