Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: web pictures

  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Thanked 0 Times in 0 Posts

    web pictures

    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!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,052 Times in 1,025 Posts
    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.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts