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:
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:
I hope this helps understand what I would like!
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?
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:
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