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

`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

Comments (0)

Only registered users can write comments!

Next >