Rollover Links

For this tutorial, I created a second site “Electro_GC_02” and those are defined in Dreamweaver, so if you want, you can download it.
Ok, I had already disucssed how to insert a “rollover-image” in a page in lesson 13.
To add a rollover link, you can proceed the same way or you can use a second way.
Of course, here we need at least two different images with the same dimensions.
First place the cursor at the location in your document where you want to insert rollover link and click the “Insert” button in the menu bar.

In the dialog that appears in the upper section give a name to your image.
This is useful if we later want to refer to this image to execute multiple changes.
In the second and third box you give respectively the original and the rollover image by clicking the “Browse” button, navigate to the image and select it.
Again, let’s leave the “Preload Rollover Image” as checked.
Specify any alternative text for visitors that turned off the “Show Images” option in their browser.
And in the last box, select the page to where you want to make the link, by clicking the “Browse” button and selecting the page or giving the address of another website.
Click the OK button.

Repeat for all rollover links.
See the results in your browser window by pressing the F12 key on your keyboard.
When asked whether you want to save changes, answer “Yes”.
Try different rollover links by hovering over this place.

Multiple changes in a rollover

We also have the ability to change color when we hover over a button.
In this example I place a blank image below the buttons “GPS”, “GSM” etc.
When I hover over a button, I would move the image of the button and the “blank image” changes.

 

We continue with what I had already made in the previous exercise.

I added the below files to the “Buttons” folder in the Files panel:

1. a blank image,

2. a GPS_info picture

3. a GSM_info picture

4. a HiFi_info picture

5. a TV_info image.

All have the same dimensions.

 

 

 

Select the blank image in the document and give it a name in the properties window.

In this example I give the name “blank” and click the Enter key on the keyboard to confirm.

 

 

Select the rollover button “GPS” made in the previous menu.
Click the downward pointing arrow next to the “Tag” panel in the panel window.
Choose the “Behaviors” tab.
In the list you see the two earlier acts for the “GPS”.
These are JavaScript behaviors.
The first restores the conversion of the image and the second swap for the image.
Double click the “Swap Image” button.
This opens the “Swap Image” dialog again.
All images that appear in the document and that I have provided a name, appear in this list with this name. And that is why it is important to give a name to your images.
Thus we have the picture (read buttons) “GPS”, “MOBILE”, “Hi” and “TV”.
And we have our image “blank”.
Select the image “blank”, because it is this image that we want to see change.
Besides the box “Set Source”, click the “Browse” button, navigate to the blank image which you want to see changed.
Select it and click Ok.
The two options below “Preload Images” and “Restore images on MouseOut” are checked.
Click the OK button again.

When you’re viewing the page in the browser (click the F12 key on your keyboard), you will see that both the “GPS” and the blank image will change when you move the mouse pointer over the “GPS” button.

If you wish to change several images when you mouse over on the “GPS” button, repeat these actions.
How many times can you repeat this for a rollover image or button I do not know, I can only say “do not go crazy”.

If you wish to remove the JavaScript Behaviour for button, select the image in the document. Double click your “Swap Image” button in the “Behaviors” panel.
Select the image whose behavior you want to remove in the dialog
And delete the text in the “Set Source” box.
Click the OK button.

 If you wish to delete all the JavaScript behaviors of a button, select the behaviors in the “Behaviors” panel and click the Delete key on your keyboard or the minus sign at the top of the “Behaviors” panel.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats