Rollover image trouble

Discussion in 'HTML & Website Design' started by fotoviva, Jul 1, 2008.

  1. #1
    Hi, I'm trying to do a rollover thing which I'm not even sure is possible, but maybe someone can help.

    Let's say I have a 2 column page. On the left is an image. On the right column are 4 graphics. What I need is when someone moves their mouse over one of the 4 graphics it changes and also the main image changes.

    So there will be 4 main images to change when the 4 right column graphics are moused in turn.

    Does that make sense? I can get the 4 graphics to change but not the main image at the same time.

    Thanks guys
     
    fotoviva, Jul 1, 2008 IP
  2. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #2
    Yeah, it should be pretty straight forward with a bit of javascript, if you don't mind using that.

    Off the top of my head, I'd guess you'd set a name for your main image, and then have an onMouseOver for each of the four images. On the mouse over, you'd get it to change the main image.

    I haven't seen the layout of the page, but there may be a slightly more elegant straight CSS solution for the same problem.

    If you can get the four main images to load with the page it'll help prevent the load delay when you do the rollovers.

    Sorry I don't have time to look it up for you, but the javascript archive at irt.org is great. I can almost always find some good code snippets, even if I have to hack them together. The image questions can be found here:

    http://www.irt.org/script/image.htm

    hope that helps!
     
    iamben, Jul 1, 2008 IP
  3. q7m

    q7m Well-Known Member

    Messages:
    1,178
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    1
    #3
    For each of the four graphics you must have something like:
    
    onmouseover="document.getElementById('large_image').src='image1.jpg';"
    Code (markup):
    and replace 'image1.jpg' with the actual image file you want to display.
     
    q7m, Jul 1, 2008 IP
  4. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Thanks guys, got a bit confused but then found out what I wanted was called a Disjointed Rollover which I managed to do quite easily through DW :)

    Cheers!
     
    fotoviva, Jul 2, 2008 IP