Wednesday, June 17, 2009

Showing Image Dynamically

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">&nbsp;</td>

<td colspan="3" valign="top">

<img id="targetimage" src="images/image1.jpg" width="420" height="252"/>

</td>

<td>&nbsp;</td>

</tr>

</table>

</body>

</html>


To download the zip folder conating the demo of the article click here



Thanks and Regards

Meetu Choudhary

No comments:

Post a Comment

Subscribe via email

Enter your email address:

Delivered by FeedBurner

MSDotnetMentor

MSDotnetMentor My Website http://msdotnetmentor.com