Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Graphics

2007081002 Email to Ronx
 

Remote Rollover Images

How to swap remote images


How to swap remote images.

This uses FrontPage/Expression Web Behaviours.

Note that these Behaviours were designed to work with older browsers - up to IE 6 but including Netscape 4 which uses the (now obsolete) <layer> tag. They may work with present day browsers, but some code used is bloated, some is deprecated in today's browsers, and may fail completely in tomorrow's.

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.

  1. Insert the first image in a cell (Image-1)
  2. Insert the default image in another cell (Image-2)
  3. 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:;
  4. Save the page. This will ensure that when images are inserted, they will be referenced using relative URLs.
Ford Anglia - circa 1953
Image-1
Stuff in between Image that is swapped
Image-2
  1. On the menu, View -> Task Pane. Change the pane to Behaviours in the Task Pane dropdown menu.
  2. Click the source image (Image-1)
  3. In the task pane, open the Insert dropdown and select Swap Image
  4. 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.
  5. In the task pane, hover over the Event created, and change it to the required event (onmouseover is the default for Swap Image).
  6. 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.

Tests Home

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:

  1. Insert the Interactive Button.
  2. Click on the button, then follow steps 7 through 9 above to swap a remote image (Image-3 above)
  3. 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).