Doing remote mouseovers with Adobe Go Live:

Doing remote mouseovers is a bit more complicated than doing regular mouseovers, but to the experienced web designer, it's unbelievably easy compared to hand coding. In order to do a remote mouseover, you need four images: the (first) image that shows normally, the (second) image that shows when you mouseover the first image, the (third) image that shows in a different place normally when the first image is not moused over, and the (fourth) image that shows on top of the third image when you mouseover the first image.

Whew! Sounds complicated, doesn't it? Really it's not. Let's start with an example. There are two image below. Place your mouse over the first image, and watch how it changes, and so does the other image. This all involves four seperate images.

1st image, to the left
2nd image under the first, changes when the first is moused over
3rd image to the right
4th image under the 3rd image, changes when the 1st image is moused over.

Lets start with how to do this, one step at a time.

1. Set your images up the way you want them, making sure to use the cyber objects icon for the images.

2. The first image should still be a question mark icon with a green corner. Select the image, and go to the Button Inspector.

choosing mouseover images

On your basic tab, as above, you will have three image question marks. In this mouseover we will only be using the first two.

3. Name your "event" by placing a title in the name field. Do not use extensions, and make it something simple. This will be the event name for the first two images.

4. Click on the first image question mark, under MAIN. Check the small white box under it, and use the browse button to choose the image from your hard drive that you want to be the first image.

5. Do the same for the OVER image, and browse to the image on your hard drive that you want to show when the first image is moused over. The event name will be the same as the first image, this is ok.

6. Click on the CLICK image question mark and make sure the small white box is UNchecked, this will disable this image. If you don't uncheck this box, you will get a javascript error when your image is moused over.

7. In your button inspector, go to the tab on top that says Actions.

8. Now under EVENTS, click on MOUSE ENT. Events section

9. Click the + button next to Actions in the rop right hand corner. actions + button

10. Now click the other Action button halfway down on the left with the question mark next to it. ?Action button

11. Once you click the ? Action button, a box will pop up. Choose IMAGE, and SET IMAGE URL. The menu box will dissapear.

12. Halfway down the button inspector, under image, click on the drop down menu to choose the SECOND event name, not the first. You need to make sure and remember which is which.

image and link section

13. In the LINK box, use the browse button to choose the fourth image.

14. Under EVENTS back at the top, choose MOUSE EXIT. Click the Actions + button, then click the ?Action button, select IMAGE, and SET IMAGE URL.

15. Again, in the image section of the button inspector, click the drop down menu to choose the SECOND event name. Then use the browse button to choose the third image.

16. Use your preview tab at the top of the page to test your mouseover. It should work!

With a little practice, this can be done in a matter of minutes, as compared to hours doing it the old fashioned way.

Enjoy!