|
The concept of rollover images is simply swapping one image for another when the mouse hovers over the original images. The original image returns when the mouse is taken off the new image. Dreamweaver offers the developer a shift off this idea in the Irregular Rollover images. Basically, the process differs only in which images are swapped. With Irregular Rollover images, the target image triggers a swap of two other images, neither one the target image. It probably would be a good idea to see an example to see the idea.
The use of Irregular Rollover images offer the designer several features which are useful for many things. First, the page is interactive. The client will feel some control over the action as he initiates the swap by mouse movement. The instructional possibilities are only limited by the developer's creativity. The following uses are but a small sample:
Let's take a look at how easily Dreamweaver allows you to create sets of rollover images. First, we have to have a "plan" for locating the images on the page.
Suppose we let this diagram represent the plan. The three buttons in the left column will cause a different image to appear in the large area where the image swapping will take place. This process calls for some advance planning and design work with the images. In particular, it will be strategic if all of the images that swap have the same dimensions. This example will use a "spacer" image or a transparent image as the initial image. When someone mouses over the buttons on the left, the transparent image will swap with the replacement image. Each of the larger images is 200 x 200 pixels. The spacer image easily can be "stretched" to the same dimensions.
The folder containing the images might look like this. The three buttons are labeled link1, link2, and link3. The larger images that will be swapped are labeled swap1, swap2, and swap 3. Note the folder also has the spacer image labeled spacer. (The other two files, dino14 and irr-rollover are the dinosaur image used above and the htm file you are looking at now.)
The process starts with opening a blank html document and saving it in the folder containing all the images you plan to use. Note that it is not an absolute requirement to locate the html document in the same folder as the images you plan to use for the irregular rollover effect. To make it easier to see, each of the buttons and the initial spacer image will be positioned in a table.
In the screen shot from Dreamweaver, the table has three rows and the cells in column 2 have been merged into a single cell. This cell contains the transparent image (spacer). The dimensions of the spacer image have been set to 200 by 200 to match the dimensions of the images that will be swapped in the rollover process. You may want to use an image with directions to the client to mouse over one of the buttons. Another alternative is to use the directions image as a "cell background" and let the transparent image allow the user to see "through" the top transparent image to the directions below. For purposes of this exercise, we will use just the transparent image.
The first step is to select the first image you want to fix first. In this case we have chosen to select the Link 1 image. You must first select the target image to tell Dreamweaver to use this image in creating the irregular rollover effect. This first step is important.
Then click on Window to open the options. Select Behaviors from the drop-down list of options. This will open the side panels if the side panels are not in view.
The Panels should open and you should see the Behaviors tab prominently displayed.
Dreamweaver lets you select the from the different behaviors by clicking on the + in the panel.
The different behaviors will drop down.
Select the Swap Image behavior from the list.
This not too helpful dialog box pops up! The different images you have linked to the page are listed. But which image is which? The clue is the word "unnamed". Perhaps you could help yourself if you chose to give a specific image a name in Dreamweaver. Exit from the dialog box and return to Dreamweaver.
It will be useful (as you will see shortly) to label or name the image that you plan to use as a "swap" image. First, select the image (transparent spacer image in this case) you plan to swap. Then in the Properties Box for this image, give it a name that you will recognize as your image to swap when the user mouses over the target.
In this case, we have chosen to use the word Blank. Note that this label is applied only in Dreamweaver and does not change the real filename of the image. (spacer.gif)
1) First select the target image. 2) Then click on the + in the Behaviors Panel. 3) Finally, select Swap Image from the behaviors. You should see a slightly different Swap Image panel. This time it will display the name you gave the image to be swapped (Blank). Much easier to see what to do.
The step above is critical in the process.
Once the image to swap has been identified, you should click on the Browse button to locate the image to swap with the "Blank" image.
In this case, we have chosen to use the swap1.gif image.
When you have selected the image you want to use, note that it is displayed and.. Click OK!
Now would be a good time to check your work so far. We suggest you save your work and review what it looks like through an Internet Browser.
Your confidence should be high at this point. All that is left is to repeat the process for the remaining two buttons.
As before, the initial task will be to select the button.
Proceed to call out the swap images using the + of the Behaviors Panel.
Select the appropriate (Blank) image to use and browse to the selection window to select swap2.
Repeat the process for the last link. Save your work and preview through the Internet Browser. If you would like to see a finished product, click on check work. |
Repeat
the steps above. 
Click
on the image you want to swap (Blank) to tell Dreamweaver
which of the images to use. 
Locate the image
you wish to swap with the Blank image when
someone mouses over the first button (Link 1). 
