Image Swap in Javascript

Hi Rudy, How do I have one big image and then a million ones below that you can click and switch the big one? Example here: Zappos shoes If you click the different colours under the shoe, it changes photos. Thanks, I Answer: Javascript! Here is a working example: Say you put all the photos in a folder like this: shoes/red.jpg shoes/red-mini.jpg shoes/blueheel.jpg shoes/blueheel-mini.jpg shoes/running.jpg shoes/running-mini.jpg make sure all the big ones are about the same size... and the default big one you set in an IMG tag with an id of TheShoe like this: <img id="TheShoe" src=shoes/running.jpg> Then below the big shoe, you have little ones... <img src=shoes/red-mini.jpg> <img src=shoes/blueheel-mini.jpg> <img src=shoes/running-mini.jpg> There, you have the Layout ... now when you click the little images, nothing happens, so you do this: <a href="#" onClick="LittleFart(this);return false;"><img src=shoes/red-mini.jpg></a> <a href="#" onClick="LittleFart(this);return false;"><img src=shoes/blueheel-mini.jpg></a> <a href="#" onClick="LittleFart(this);return false;"><img src=shoes/running-mini.jpg></a> What that is is an 'Link' tag that goes nowhere, but has an onClick event that runs LittleFart. You can't put an onClick on an "img" tag for some stupid reason. Then at the top of the page, you tell the browser how to do a LittleFart... basically, you want to take the img name in the image tag you clicked... and take the word MINI out and stuff the new image into the TheShow image tag. Make sense? The mini image src is inside the A HREF tag, so you use lastChild to grab it... <script> function LittleFart (miniImageLink) { var newImageURL = miniImageLink.lastChild.src.replace(/-mini/, ''); var isabelsBigShoeImageTag = document.getElementById("TheShoe"); //alert(newImageURL); isabelsBigShoeImageTag.src = newImageURL; } </script>