This piece of code demonstrate that when we take mouse on a particular image the place holder for the image displays the corresponding image... here goes the code
<!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>
<title>Meetu Choudhary</title>
Script for head section
<script language="javascript" type="text/javascript">
function showimage(imagename)
{
targetimage.src="images/" + imagename;
}
</script>
</head>
Body will have these contents..
<body>
<table width="694" height="525" border="0">
<tr>
<td width="141" height="95" valign="top">
<img src="images/image1.jpg" onmouseover="showimage('image1.jpg')" width="141" height="93">
</td>
<td width="141">
<img src="images/image2.jpg" width="141" height="93" onmouseover="showimage('image2.jpg')">
</td>
<td width="141">
<img src="images/image3.jpg" width="141" height="93" onmouseover="showimage('image3.jpg')">
</td>
<td width="139">
<img src="images/image4.jpg" width="141" height="93" onmouseover="showimage('image4.jpg')">
</td>
<td width="98">
<img src="images/image5.jpg" width="141" height="93" onmouseover="showimage('image5.jpg')">
</td>
</tr>
<tr>
<td height="424"> </td>
<td colspan="3" valign="top">
<img id="targetimage" src="images/image1.jpg" width="420" height="252"/>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
To download the zip folder conating the demo of the article click here
Thanks and Regards
Meetu Choudhary
Attachments
Sample.Zip (21650-414-sample.zip)
For more details, visit http://www.msdotnetmentor.com/?p=524