Member Avatar for schwarznavy

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>

Just put the caption in a text box under the image, and write to it when you write to the image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.