Hello,
I'm not a Javascript expert -- not even a novice.
But reading this forum and others, I've managed to get code in my page that allows me to have a big image, and three thumbnails.
When I click on the thumbnails, a bigger version of them replaces the big image.
The Big Image is supposed to have a caption under it.
I can't figure out how to get the caption to change when the image is changed.
See the attached screenshot for what I'm trying to do.
I appreciate any help.
I'm not sure where I could "store" the caption text for the other images...maybe I could make it hidden.
Here is the code I've used to swap the images:
function replace(Bigpic, Lilpic1)
{
var Bigpic = document.getElementById("Bigpic");
var Lilpic1 = document.getElementById("Lilpic1");
var Bigpicsrc = Bigpic.src;
var Lilpic1src = Lilpic1.src;
Bigpic.src = Lilpic1src;
}
function replace1(Bigpic, Lilpic2)
{
var Bigpic = document.getElementById("Bigpic");
var Lilpic2 = document.getElementById("Lilpic2");
var Bigpicsrc = Bigpic.src;
var Lilpic2src = Lilpic2.src;
Bigpic.src = Lilpic2src;
}
function replace2(Bigpic, Lilpic3)
{
var Bigpic = document.getElementById("Bigpic");
var Lilpic3 = document.getElementById("Lilpic3");
var Bigpicsrc = Bigpic.src;
var Lilpic3src = Lilpic3.src;
Bigpic.src = Lilpic3src;
}
.....
<img border="1" src="News/Imagery/Lilpic1.jpg" ID="Bigpic" hspace="0" width="445" height="296"><br>
<font size="2">CAPTION TEXT FOR FIRST IMAGE</font></font></td>
.....
<img border="1" src="News/Imagery/Lilpic1.jpg" ID="Lilpic1" onclick="replace('Lilpic1', 'Bigpic');" width="164" height="109" hspace="0" style="border-width: 2">
<img border="1" src="News/Imagery/Lilpic2.jpg" ID="Lilpic2" onclick="replace1('Lilpic2', 'Bigpic');" width="164" height="109" hspace="0" style="border-width: 2">
<img border="1" src="News/Imagery/Lilpic3.jpg" ID="Lilpic3" onclick="replace2('Lilpic3', 'Bigpic');" width="164" height="115" hspace="0" style="border-width: 2"></font></td>