↑
Graphic >>>
Displays any of several images on the same page just by clicking its thumbnail. This way, it is unnecessary to open a new window or use the back button after going to each page. Sizes can be altered as required.
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
browserName
=
navigator.appName;
browserVer
=
parseInt(navigator.appVersion);
ns3up
=
(browserName
==
"Netscape"
&&
browserVer >=
3);
ie4up
=
(browserName.indexOf("Microsoft")
>=
0
&&
browserVer >=
4);
function
doPic(imgName)
{
if
(ns3up
||
ie4up)
{
imgOn
=
(""
+
imgName);
document.mainpic.src
=
imgOn;
}
}
</script>
<center>
<table
width=360
border=1
cellspacing=0
cellpadding=0>
<tr>
<td><a
href="javascript:doPic('toad.jpg');"><img
src="toad.jpg"
width=90
height=60
border=0></a></td>
<td><a
href="javascript:doPic('lizard.jpg');"><img
src="lizard.jpg"
width=90
height=60
border=0></a></td>
<td><a
href="javascript:doPic('gecko.jpg');"><img
src="gecko.jpg"
width=90
height=60
border=0></a></td>
<td><a
href="javascript:doPic('chameleon.jpg');"><img
src="chameleon.jpg"
width=90
height=60
border=0></a></td>
</tr>
<tr>
<td
colspan=4
align=center><img
name="mainpic"
src="toad.jpg"
width=365
height=190
border=0></td>
</tr>
</table>
</center>
|
Step 2: The script uses 4 images as part of its interface. You can create your own, or use the 4 below (resized for easier download):
(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.
→
|