I. ROTATING IMAGES USING THE SWAP IMAGES BEHAVIOR We’ve learned how to do rollovers using a few techniques: 1. By using the “Swap image” behavior a. Start by placing the image that you want for the rollover in the design area. You’ll select it by clicking on it (the black bounding box will appear around it). Give it a name by using the Properties inspector, as pictured below (this is just the left side of the Properties bar). In my example, the image is called “catimage”:
b. Next, choose the “Swap Image” behavior, pictured below (it’s located under the Behaviors tab in the Tag menu):
c. The following menu will appear:
The image highlighted in blue is the image that you just named and selected for rollover. The “Set Source to:” box is the where you’ll put the path for the image that you want to swap out. Remember: make sure that all of these images are inside of your site folder! Make sure that “Preload images” and “Restore images onMouseOut” are checked. 2. That’s the harder way. The other two methods that we’ve used for Rollovers are under the Insert menu:
If you are inserting a rollover image, the following menu will appear:
In this case, you’ll just insert the image that appears when the screen loads into “Original image” and the swap image into “Rollover image.” Remember to insert your alt text; if the image is linked, enter the URL into “When clicked, Go to URL” The Navigation Bar (also available under Insert > Image Objects > Navigation Bar) is essentially just a more advanced version of the Rollover Image. The menu is below:
2. 1. 3.
With this menu, you’ll create a graphical navigation menu that will appear either vertically or horizontally (depending on what you do in #4). This is basically a more complex version of the rollover image above—in this case, you can use up to four image “states” (up, down, over, over while down).
2. We are going to apply this behavior to the tag of the document, so select the body tag in the lower left hand corner of the document window: