View Full Version : web pictures

02-02-2007, 08:29 PM
I have visited www.benderchaffey.com (Gallery page) and they have an AWESOME example of how their pictures pop up in a new window (where a picture was already) and it just changes the images when you hover over the corresponding link to the left. I WANT THIS! But I don't know how to code it or to set it up through Frontpage for my own site. If anybody could help I would be SO grateful. Thanks!

02-02-2007, 09:31 PM
That's a simple JavaScript:

function switchPic(num)
document.getElementById("image").src = "images/image"+num+".jpg"

The basic HTML for that is:

<a href="#" onmouseover="switchPic(1); return false;">link</a>
<a href="#" onmouseover="switchPic(2); return false;">link</a>
<img id="image" src="images/mainimage.jpg" alt="" />

Explanation: You have a main image (colored in blue here) with an ID (can be any name) and as many links (colored in green here) as you have images to swap. Now the "onmouseover" event handler in the link code is telling the links that when you hover over them the image will be switched in the place of the main image. For this to work the ID needs to be the same in the JavaScript and the HTML (colored in magenta).

The code in red is related to the images that are gonna be shown when you're going over the links. In the above example the images are called, e.g. image1.jpg, image2.jpg (etc., etc.), and the number in the "onmousover" event handler in the HTML (here in red) is adding the number to the file name in the JavaScript (where it reads +num+).

Might sound a little complicated or confusing for someone that is not familiar with coding so try it out with that basic code on an empty page at first and get back if you have more questions.