Remote Rollover Images
How to swap remote images
How to swap remote images.
This exercise places the source image (the image that is acted on by the mouse) and the affected image at opposite ends of a table.
- Insert the first image in a cell (Image-1)
- Insert the default image in another cell (Image-2)
- Double click on each image, and set the alt text and any other properties for the images. The properties set for Image 2 will be shared by the swapped images.
For Image-1, set the location on the General tab to javascript:;
- Save the page. This will ensure that when images are inserted, they will be referenced using relative URLs.
 Image-1 |
Stuff in between |
 Image-2 |
- On the menu, View -> Task Pane. Change the pane to Behaviours in the Task Pane dropdown menu.
- Click the source image (Image-1)
- In the task pane, open the Insert dropdown and select Swap Image
- In the dialogue that opens, select the image to be swapped (in Original Image URL column), then browse to the image it is to be swapped with in the Swap Image URL text box. Click OK.
- In the task pane, hover over the Event created, and change it to the required event (onmouseover is the default for Swap Image).
- Repeat 6 through 10 for any other events to be programmed. The example above uses onmouseover, onmouseout and onmousedown events to swap two other images with Image-2.
When clicked, this
button opens the Tips
menu in a new window
or tab. |
stuff in between |
 Image-3 |
For the Interactive Button to control a remote image:
- Insert the Interactive Button.
- Click on the button, then follow steps 7 through 9 above to swap a remote image (Image-3 above)
- Repeat steps 7 through 9: the image to be swapped to is the original Image-3, and change the event to onmouseout (swaps the image back).