Scroll over images in different section of webpage

[Svarc]

Hi Guys,

Firstly sorry if I do not explain this well or my title is awful but here goes. Basically I would like to have on my webpage a list of products that we are advertising down the left hand side. The list will either be in text or images (buttons that are a JPEG) these will be links to each products individual page. I would like it so that when the text or button image is scrolled over so that the cursor is on on the link that an image on the right hand side of the site appears. When there is no link being hovered over nothing will show on the right hand side. The idea is that a picture of the appropriate image shows when scrolled over. I don't think I have explained it well but here is an image I knocked up so give you an idea.



Uploaded with ImageShack.us

[germansin]

Re: Scroll over images in different section of webpage

Hi Svarc

As I understand your question, the idea is to have one big picture (or a text) displayed on the right side of the screen, which is replaced by another image while the mouse hovers over one of the buttons on the left. When the mouse hovers out of that button, the popped up image vanishes and the original picture (or text) appears again on the screen. If this is the idea, it can be done this way:

1) Prepare the 4 images to have exactly the same size
2) Locate them in the page, stacked, leaving the original image above the other ones. Let's say this is Image 1.
3) Insert 4 Shapes and edit them to make them look like buttons. Place them in the left side of the screen.
4) Edit the first button, within Shape Properties, entering the text "Product 1".
5) Edit the 2nd button, labelling it as "Product 2", and Add the following 4 Events:
onMouseOver - Hide - Image1 (to hide the original image)
onMouseOver - Show - Image2 (to display the image 2)
onMouseOut - Hide - Image2 (to vanish the image 2)
onMouseOut - Show - Image1 (to display the original image again)
6) Do the same for the other buttons, changing Image 2 by 3 and 4,

If you prefer to have all the 4 images hidden by another one or by a text box (non transparent !), replace Image1 in the Events screens of steps 5 & 6 by ImageN or TextX. In this case, you will have to edit also the first button to have the same events as the other ones.
The number of the images or text boxes for Events purposes are assigned at the time of inserting them in the page, so you may need to identify them by testing the page in Preview.

This method has worked OK in my site so it should work in yours too.

[germansin]

Re: Scroll over images in different section of webpage

I forgot to mention that, besides showing and hidding the large images, you can also link the buttons to other pages.

Still within Shape Properties, you add another Event:
onClick - Javascript Function - window.open('http://www.google.com');

Edit the URL showing your target URL.