Click the Select Behind tool to activate it and pass over the first of the trigger button hotspots with your cursor.

When you see a red outline around your button, click on it to select it.

Click on the Behavior Control button (the small white circle with the cross hair) and choose Add Swap Image Behavior from the menu that pops up. The Swap Image wizard will open.

Adding the Behaviors:

In the Swap Image wizard, click on the slice over the button image in the diagram window.

Select Frame two and leave both Preload Images and Restore Image onMouseOut checked. Repeat this with the second button.

Click on the Behavior Control Button over the top button image hotspot and drag to the slice over the disjoint rollover area.

When you release the mouse button the Swap Image dialog box will appear. Click on the More Options button to open the Swap Image wizard.

The slice over the disjoint rollover area in the diagram window is already selected. Make sure that Frame 2 is the frame that will be swapped.

Leave Preload Images checked but uncheck Restore Image onMouseOut. Repeat this with the second button, but with the frame number set to Frame 3.

Adding the links and restore functions:

Use the select behind tool to locate and click on the first of the hotspots over the arrows. Open the Object panel, click on the text box next to the link icon, and type or paste in the URL.

Click on the Behavior Control button in the middle of the hotspot and drag over the disjoint rollover area. When you release the mouse button the Swap Image dialog box will appear. Click on the More Options button to open the Swap Image wizard. Change the frame to Frame 1 and uncheck Restore Image onMouseOut. Exit the Swap Image wizard by clicking on OK.

Open the Behaviors panel and click on the down arrow under 'Event.' Choose onMouseOut from the pop up menu. Repeat the same procedure with the hotspot over the second arrow. And there you have it.

This should function in version 3x and up browsers.

Back to top