I don't know where you want the caption, so I'm assuming you want it where the main image is.
So, one.
You'll have to give all the other images alts and titles. So change this:
Code:
<table>
<tr>
<td>
<a onClick="update('pic1.gif')">
<img src="pic1-sm.gif" title="beautifull mountains">
</a>
</td><td>
<a onClick="update('pic1.gif')">
<img src="pic2-sm.gif">
</a>
</td><td>
<a onClick="update('pic3.gif')">
<img src="pic3-sm.gif">
</a>
</td><td>
<a onClick="update('pic4.gif')">
<img src="pic4-sm.gif">
</a>
</td></tr>
</table>
To this:
Code:
<table>
<tr>
<td>
<img src="pic1-sm.gif" title="beautiful mountains" alt="beautiful mountains" onClick="update(this)">
</td>
<td>
<img src="pic2-sm.gif" title="water reflects moutains" alt="water reflects moutains" onClick="update(this)">
</td>
<td>
<img src="pic3-sm.gif" title="snow tree" alt="snow tree" onClick="update(this)">
</td>
<td>
<img src="pic4-sm.gif" title="green trees" alt="green trees" onClick="update(this')">
</td>
</tr>
</table>
And make the top, where the script is to this:
Code:
<script type="text/javascript">
function update(el){
document.getElementById('main').src=el.src;
document.getElementById('main').title=el.title;
document.getElementById('main').alt=el.alt;
}
</script>
Bookmarks