www.webdeveloper.com
Results 1 to 4 of 4

Thread: Specific Image Behaviour ...

  1. #1
    Join Date
    Mar 2008
    Posts
    3

    Red face Specific Image Behaviour ...

    First of all, hello!

    I'm sorry if this is posted in the wrong place, but at this point I don't know the particular type of code I'm needing is JavaScript or not java or some other type of script other than html or whatever - I only know I've seen it done and now I can't find it and I need it for something so hopefully someone here can lend some suggestions.... Thank you!

    I am working on a basic little one page website for myself and my partner featuring our small business, so I'm not being paid for doing this site I just need some help with a specific type of image flip, rollover or whatever it's called.

    I've seen the information on image flips rolling over the same size images etc for two pictures to show in the same location (eg a link button or banner that changes colour on mouseover etc) but that's not exactly what I'm looking for.

    If you go to the website: http://www.sparklingwhite.ca you'll notice that I have a 350x350 image on the left hand side and various thumbnails on the right.

    Right now if you click on the thumbnails a larger 350x350 image will open in a new window... what a pain in the butt.

    What I want is for the large image on the left to 'flip' to the large image that matches whatever thumbnail is being moused over... not sure if I explained that right.

    So basically you mouse over the thumbnail on the right - and the picture that changes is the big one on the left ...

    Any ideas? Thoughts? Suggestions? I know I've seen it... just can't find it now.

    Any help would be greatly appreciated - I'm better interior designer than web designer *lol*

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Code:
    <img id="swapMe"..... /> <!-- this is your 350x350 -->
    
    <img onmouseover="document.getElementById('swapMe').src='newImg.jpg' ".... /> <!-- this is one of your thumbnails -->
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Mar 2008
    Posts
    3

    Thank you!

    Do I need to put any script info in the header as well? Or just that code for the images? And I'll need to repeat that for each thumb, right?

    Sorry, again the coding thing is so not my forté.

  4. #4
    Join Date
    Mar 2008
    Posts
    3

    Actually...

    I think I got it! Thanks again! ... Now to upload and see if it works or if I managed to muck it up *lol* Wish me luck!


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles