pagerunners "rolling pics" tutorial

Save time and space with a photo rollover example. Images can be set up with a thumbnail and upon mouseover, show a larger and more detailed photo (or description). Also works with links instead of thumbnail representations.

Rollover thumbnails to see larger photographs.

Source code:

<script language="JavaScript">
 img0=new Image();
 img0.src = "louisa.jpg"

img1=new Image();
 img1.src = "snoqualmie.jpg"

img2=new Image();
 img2.src
= "ffalls.jpg"

img3=new Image();
 img3.src = "marten.jpg"
 function swap(file)

{
 		document.large.src=file
 	}</script> </head>    <div align="center"> <IMG SRC="photoroll.jpg"
WIDTH="425" HEIGHT="105" alt="pagerunners photo rollovers logo"></div>
<table width="430" border="1" align="center" cellpadding="5" cellspacing="0"
bordercolor="#000000" bgcolor="#d9d9dd"> <tbody><tr> <td
align="center"><br> <font size="3" face="Arial, Helvetica, sans-serif"><strong>
Rollover thumbnails to see larger photographs.</strong></font><br>
<table width="100%" border="0" cellspacing="0" cellpadding="5"> <tbody><tr
align="center"> <td rowspan="2"><img src="LakeLouiseC.jpg" border="0"
class="border" name="large"></td> <td align="center"><img
src="louisa2.jpg" border="0" class="border" onmouseover="swap('louisa.jpg');"></a></td>
<td align="center"><img src="snoqualmie2.jpg" border="0" class="border"
onmouseover="swap('snoqualmie.jpg');"></a></td> </tr>
<tr> <td align="center"><img src="ffall2.jpg" border="0" class="border"
onmouseover="swap('ffalls.jpg');"></a></td> <td align="center"><img
src="marten2.jpg" border="0" class="border" onmouseover="swap('marten.jpg');"></a></td>
</tr> </tbody></table> </td> </tr> </tbody></table>

HTML Tips n' Tricks