Image Jump?

**mxtaylor** · 04 Nov 2005, 12:39 AM

Hi, I want to make a web page with thumbnails along the side and when you click on them you will see a larger image of that thumbnail in the center of the same page. I'm a little rusty and unsure of how to do it. ANy help is appreciated.

**dingo** · 04 Nov 2005, 11:21 AM

Hi
You could do it with javascript or flash.
I haven't tested this code, so I don't know if it works, but give it a try.

Put this in your <head> element, below anything else in there:

Code:

<script>
function loadImg(url) {
    var bigImg = document.getElementById("bigImg");
    bigImg.src = url;
}
</script>

Put this kind of thing where you want the thumbnails:

Code:

<a href="javascript:void(loadImg('big_1.jpg'))">
    <img src="tn_1.jpg" alt="Thumbnail image 1" />
</a>
<a href="javascript:void(loadImg('big_2.jpg'))">
    <img src="tn_2.jpg" alt="Thumbnail image 1" />
</a>

And this where you want your full image:

Code:

<img src="big_1.jpg" alt="Full image" id="bigImg" />

Without some kind of server-side script you must upload seperate image files for the thumbnail and the full image (for example, here I used big_1.jpg and tn_1.jpg).
Hope this helps.

Thread: Image Jump?

Thread Tools

Image Jump?

Posting Permissions