Dan V. wrote:
What is the best/simplest way to have a large top image with let's say 14
thumbnails under it in 7 rows and to replace the top image with the larger
one when a user clicks on a thumbnail? I would prefer to only have one html
page.
Probably best done with script with a fall-back for non-scripted
browsers that opens the big image in either the current or a new window.
Try posting to comp.lang.javas cript.
Here's something to play with - turn off scripting and it loads the
image in the page. Onclicks are not added if appropriate features not
supported.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Swappi ng images play</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#thumbTable {border-collapse: collapse;}
#thumbTable td {
border: 1px solid blue; width: 98px; text-align: center;
}
#bigPicDiv {
width: 200px; height: 200px; border: 2px solid #ddddff;
margin-left: auto; margin-right: auto;
}
#thumbsDiv {
margin-left: auto; margin-right: auto; border: 1px solid red;
}
#bigImage {width: 200px; height: 200px;}
img {border: 0;}
</style>
<script type="text/javascript">
function swapImage(el){
var img = document.getEle mentById('bigIm age');
img.src = el.href;
}
function initLinks( id ){
if ( !document.getEl ementsByTagName
|| !document.getEl ementById ) {
return;
}
var el = document.getEle mentById(id);
var as = el.getElementsB yTagName('a');
var i = as.length;
while ( i-- ){
as[i].onclick = function() {
swapImage(this) ;
return false;
}
}
}
window.onload = function() {
initLinks('thum bTable');
}
</script>
</head><body>
<div id="bigPicDiv" >
<img src="big-a.jpg" id="bigImage">
</div>
<table id="thumbTable " align="center">
<tr>
<td><a href="big-a.jpg"><img src="a.jpg"
width="98px" height="98px"></a>
<br>Caption A
<td><a href="big-b.jpg"><img src="b.jpg"
width="98px" height="98px"></a>
<br>Caption B
</tr>
<tr>
<td><a href="big-c.jpg"><img src="c.jpg"
width="98px" height="98px"></a>
<br>Caption C
<td><a href="big-d.jpg"><img src="d.jpg"
width="98px" height="98px"></a>
<br>Caption D
</tr>
</table>
</body>
</html>
--
Rob
