I have one big "active" image and 4 thumbs. When you click a thumb, the active image should be replaced. Here's what I've done so far but I'm stumped.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
var activeImg = document.getElementById('active');
var imageOne = document.getElementById('imgone');
var imageTwo = document.getElementById('imgtwo');
var imageThree = document.getElementById('imgthree');
var imageFour = document.getElementById('imgfour');
this.activeImg.src = image1.jpg;
this.activeImg.src = image2.jpg;
this.activeImg.src = image3.jpg;
this.activeImg.src = image4.jpg;
<td colspan="4"><img src="image1.jpg" id="active" /></td>
<td><img src="image1_thumb.jpg" id="imgone" /></td>
<td><img src="image2_thumb.jpg" id="imgtwo" /></td>
<td><img src="image3_thumb.jpg" id="imgthree" /></td>
<td><img src="image4_thumb.jpg" id="imgfour" /></td>
any help would be appreciated
They would be loaded onclick, the other big images
No, all the images are in the same directory. the big ones are called, for example:
the thumb is
Are you planning on loading the other large images onload and then hiding them? Or would you like to have them loaded only onclick?
Will the main images and the thumbnails have the same name but reside in a different directory?
I created a very simple photo gallery example for you to take a look at. Hopefully it will help you out. I used html, css and a wee little bit of jQuery.
If you have any questions let me know.
To make that code work, you'd need to enclose the image src in quotes. Also, the reference to the dynamic large image has already been obtained via getElementById("active"), so leave the references to 'this' out of it.
So in the first onclick assignment, use:
activeImg.src = "image1.jpg";
.. and so on for the others.
Also, if you are going to apply styling to the gallery later on, you might want to remedy that doctype, which is missing its URI. A Transitional html doctype with a missing URI creates styling problems (quirks mode) for Internet Explorer. Make sure you code consistently also - those img tags are xhtml.
And for this type of rollover gallery, you can also do it with CSS entirely if you like. Have a look at the many examples at www.cssplay.co.uk
thanks alot for the help guys! I figured it out