Inserting a Rollover

In this lesson you will learn how to insert two images to make a rollover (and a hyperlink) in an HTML file.

1. From the Site Window, open index.html and click on the image to select it
   
   
   
   
   
2. Delete the image (do I have to say press Delete?)
   
   
   
3. In the Objects Panel, click on the Insert Rollover Image icon
   
   
   
   
   
4. From the Insert Rollover Image dialog box, click on Browse... (to the right of Original Image)
   
   
   
   
   
5. Choose an image from the images folder in your Local Root Folder
   
   
   
   Note: The Open command will inset the first image (called Original Image in the dialog box)
   
   
   
6. Click on Browse... to the right of Rollover Image
   
   
   
   
   
7. Dreamweaver automatically jumps back to where you selected the Original Image
   
   Select your properly named rollover image (just below the original) and click Open
   
   
   
   
   
8. The primary purpose of these Javascript rollovers (besides looking cool) is to provide visual feedback that lets the viewer know he or she has just encountered a hyperlink
   
   Click on Browse... (as shown) to insert a hyperlink
   
   
   
   
   
9. Unlike before, your HTML pages now appear in the dialog box
   
   Select about_this_site.html and Open
   
   Note: It's much easier (and quicker) to just double-click on the file you want to select
   
   
   
   
   
10. Make sure Preload Rollover Image is checked before you click OK (then click)
    
    
    
    
    
11. Yikes! Your image appears looking like:
    
    
    
    Don't worry, that's normal
    
    
    
12. Click away from the image (in the document window) and it will look like:
    
    
    
    No, the rollover will not work in Dreamweaver
    
    To see it in action you must preview in a browser (F12)
    
    
    
13. Use the rollover (below) to get back to the index page