Showing posts with label display dynamic images. Show all posts
Showing posts with label display dynamic images. Show all posts

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

Subscribe via email

Enter your email address:

Delivered by FeedBurner

MSDotnetMentor

MSDotnetMentor My Website http://msdotnetmentor.com