Results 1 to 3 of 3

Thread: Multiple Images Change on Rollover

  1. #1
    Join Date
    Aug 2009
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Post Multiple Images Change on Rollover

    I am not very good with Java Script as you can tell. But I would like to have this sort of affect:
    http://javascript.internet.com/misce...le-images.html

    What I would like to do though is when I scroll over one of the squares on the page, it expands, then changing all the other images as it expands. When they move the mouse off the thumbnail, it should then go back to when they initially saw the page. The same affect should apply for the rest of the thumbnails.

    Here is a sketch of what I want to do:
    http://gds.parkland.edu/student/fall...es/splash6.jpg

    I hope this helps understand what I would like!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Let me see if I've got this right. You could have one image, but all you see are these four little cropped versions of it, portholes if you will. If you move your mouse over any of them, the portholes all expand their viewable area until they merge, revealing the full image. The image itself never changes size or aspect ratio, it's just that the part of it that you can see increases. Then when you move the mouse away, the viewable area of each portal shrinks back to what it was to begin with.

    Is that it, or did you have something else in mind?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2009
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    You have it partially right. What I mean by it is that I wanted to take the navigation bar effect from this site: http://nathanborror.com/

    With this effect, the first thing the user would see is the four portholes. The user would mouse over one of them, expanding that porthole along with the rest of the portholes and changing the background to show a slit of a picture that is in the user's selected porthole. Once the person mouses off of the porthole, all of the pictures in the porthole would go back to normal, changing the porthole into their default pictures. The rest of the portholes would act the same way, having each of the pictures change to a different picture as you scroll over them.

    What I wanted to do was showcase some of his pictures with the links when the person would mouse over the different portholes.

    Here are some images to help you understand what I'm trying to get at:
    http://gds.parkland.edu/student/fall...sh-initial.jpg
    http://gds.parkland.edu/student/fall...edoverlink.jpg

    I hope this makes more sense to you.
    Last edited by Abbster22; 10-06-2010 at 09:22 PM. Reason: adding additional resources to help understand concept

Bookmarks

Posting Permissions

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