Click a thumbnail to show its larger self
<script type="text/javascript">
function swapImage(obj){
document.images["main"].src=obj.alt
}
</script>
<img src="pic01sm.jpg" alt="pic01.jpg" width="80" height="55" onclick="swapImage(this)">
<img src="pic02sm.jpg" alt="pic02.jpg" width="80" height="55" onclick="swapImage(this)">
<img src="pic03sm.jpg" alt="pic03.jpg" width="80" height="55" onclick="swapImage(this)">
<img src="pic04sm.jpg" alt="pic04.jpg" width="80" height="55" onclick="swapImage(this)">
<img src="pic05sm.jpg" alt="pic05.jpg" width="80" height="55" onclick="swapImage(this)">
<br><br>
<img name="main" src="pic05.jpg" alt="">
Thumb replaces big pic, big pic replaces thumb,
<script type="text/javascript">
function swapImage2(obj){
bigPic=document.images["main2"]
thumbPic=document.getElementById(obj.id)
currentSrc=bigPic.src
currentAlt=bigPic.alt
bigPic.src=obj.alt
bigPic.alt=obj.alt
thumbPic.src=currentSrc
thumbPic.alt=currentAlt
}
</script>
<img id="p1b" src="pic01sm.jpg" alt="pic01.jpg" width="80" height="55" onclick="swapImage2(this)">
<img id="p2b" src="pic02sm.jpg" alt="pic02.jpg" width="80" height="55" onclick="swapImage2(this)">
<img id="p3b" src="pic03sm.jpg" alt="pic03.jpg" width="80" height="55" onclick="swapImage2(this)">
<img id="p4b" src="pic04sm.jpg" alt="pic04.jpg" width="80" height="55" onclick="swapImage2(this)">
<br><br>
<img name="main2" src="pic05.jpg" alt="pic05.jpg" width="300" height="200"><br><br>