Randy said:
I have a set of thumbnails on a page (I have saved the thumbnails as separate
files). I would like an enlarged picture to display (which I also have
available) on the same web page as you click each thumbnail, changing the
previous picture to the new enlarged one corresponding to the thumbnail clicked.
It's a portfolio that I'm trying to display, and I would like to have the user
quickly zip through the portfolio without having to close a new window, hit the
back back key, etc. All images would be displayed on the same web page. Can
someone help?
if you know javascript, use this code - it presents your thumbnails around the
edge of the large image, and the large image changes onclick of the little
images.
sorry, I don't havea working example at the moment.
this code was from
http://myplace.50g.com if your're interested the product to
download free is "Javascript Vault" - and has lots of other useful scripts.
Just change your images for those examples below, to the same dimensions, and it
should work OK.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<LINK href="general.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jenny Blewitt (
[email protected]) -->
<!-- Web Site:
http://www.webdesignsdirect.com -->
<!-- Begin
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;
}
}
// End -->
</script>
</HEAD>
<BODY Background=../graphics/grayback.jpg>
<center><BR>
<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>
</BODY>
</HTML>
