Hi
I am struggling to find a code meeting my requirements... I want to
display 4 thumbnails of photos in a row (table 1X4). When any thumb is
clicked the large image size shud appear just below the 4 thumb aligned
as center... along with description of photo. Anyone cn help me out
plzz
Regards,
John...
Using something proposed by somewhere :
<html>
<base href="
http://www.azphx.com/dhtml/tmp/">
<style type="text/css">
#images { text-align: center }
img { cursor: pointer }
#canvas { cursor: auto }
</style>
<div id="images">
<img src="alpha6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"alpha\".">
<img src="beta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"beta\".">
<img src="gamma6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"gamma\".">
<img src="delta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"delta\">
<br>
<img id="canvas" src="blank.gif"
border="1" height="256" width="256">
<br>
<div id="canvasTitle"></div>
</div>
<script type="text/javascript">
function shwImage(thisImage) {
document.getElementById("canvas").src=thisImage.src;
document.getElementById("canvasTitle").innerHTML=thisImage.title;
}
</script>
</html>
and for non-DOM browsers :
<html>
<base href="
http://www.azphx.com/dhtml/tmp/" target="_blank">
<center>
<table border=1 cellpadding=0>
<tr>
<td>
<a href="alpha6464.jpg"
onclick="shwImage(this,'This is the letter \'alpha\'.'); return
false;">
<img src="alpha6464.jpg" border="0" height="64" width="64"></a>
</td><td>
<a href="beta6464.jpg"
onclick="shwImage(this,'This is the letter \'beta\'.'); return false;">
<img src="beta6464.jpg" border="0" height="64" width="64"></a>
</td><td>
<a href="gamma6464.jpg"
onclick="shwImage(this,'This is the letter \'gamma\'.'); return false;">
<img src="gamma6464.jpg" border="0" height="64" width="64"></a>
</td><td>
<a href="delta6464.jpg"
onclick="shwImage(this,'This is the letter \'delta\'.'); return false;">
<img src="delta6464.jpg" border="0" height="64" width="64"></a>
</td>
</tr>
<tr>
<td colspan="4" align=center>
<img name="canvas" src="blank.gif"
border="1" height="256" width="256">
</td></tr></table>
<form name="canvasvalue"><input type=text size=40></form>
</center>
<script type="text/javascript">
function shwImage(thisImage,thisTitle) {
document.images["canvas"].src=thisImage.href;
document.canvasvalue[0].value=thisTitle;
}
</script>
</html>
nota :
take care first example will not more work if javascript is disabled
Stephane Moriaux et son [moins] vieux Mac