• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 5. Adding User Interactivity > Using Insert Rollover Image

Using Insert Rollover Image

The most common use of JavaScript on Web pages is to create a rollover—an image that changes when the user moves the pointer over an image. You can create rollovers in Dreamweaver without ever looking at the HTML or JavaScript code. A rollover is a simple behavior that is included in the Common Objects panel. When you use this method, Dreamweaver creates the behavior behind the scenes. When the rollover image is selected, the resulting behavior will appear in the Behaviors panel, which you'll use in the next exercise.

1.
Create a new document and save it as rollem.htm in the Lesson_05_Behaviors folder. Title the page Learning Rollovers.

In the following steps, you will create a rollover on this page.

2.
Place the mouse pointer at the top of the page. In the Objects panel, click the Insert Rollover Image button. Alternatively, you can choose Insert > Interactive Images > Rollover Image.

The Insert Rollover Image dialog box opens.

Dreamweaver steps you through the process of creating rollovers in this dialog box. If you haven't initially placed your images on the page, you might prefer this method, because it enables you to insert an image and a rollover specify image at the same time. In the following exercise, you will define rollover states for images that have already been placed on the page.

3.
In the Image Name text box, type off for the graphic name.

The dialog box provides a text box where you can name the image so that you won't forget. If you don't name your rollover images, Dreamweaver assigns generic names automatically in numeric order: Image1, Image2, etc… When naming your images, don't use spaces or any special characters.

4.
Click the Browse button next to the Original Image text box and find off1.jpg in the Rollovers folder.

This image will appear on the page before the user rolls over it.

5.
Click the Browse button next to the Rollover Image text box and find the rollover image off2.jpg.

This image will replace the first one when the user rolls over it.

TIP

When creating your graphics, make each image the same size. If you don't, the second rollover image will be resized to the size of the first image. Resizing distorts the second image.

6.
Click the Browse button next to the When Clicked, Go To URL text box and find the file lake_tahoe.htm in the Lesson_05_Behaviors folder. Then click OK.

The rollover now links to the file you chose. The URL you chose in the When Clicked, Go To URL text box now appears in the Link text box on the property inspector when the image is selected.

NOTE

If you leave the text box blank, Dreamweaver fills it with a number sign (#), which creates a null link, in the Link text box of the property inspector. The number sign tells the browser to display the pointing-hand pointer when the user rolls over the graphic. You can replace the number sign with a link value, but do not leave the Link text box in the property inspector empty, because doing so will remove the JavaScript.

7.
Save your file and test it in the browser.

You can close this file.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint