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" "">

<html xmlns="" >


<title>Meetu Choudhary</title>

Script for head section

<script language="javascript" type="text/javascript">

function showimage(imagename)


targetimage.src="images/" + imagename;




Body will have these contents..

<table width="694" height="525" border="0">


<td width="141" height="95" valign="top">

<img src="images/image1.jpg" onmouseover="showimage('image1.jpg')" width="141" height="93">


<td width="141">

<img src="images/image2.jpg" width="141" height="93" onmouseover="showimage('image2.jpg')">


<td width="141">

<img src="images/image3.jpg" width="141" height="93" onmouseover="showimage('image3.jpg')">


<td width="139">

<img src="images/image4.jpg" width="141" height="93" onmouseover="showimage('image4.jpg')">


<td width="98">

<img src="images/image5.jpg" width="141" height="93" onmouseover="showimage('image5.jpg')">




<td height="424">&nbsp;</td>

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

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







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 My Website