Lesson 5 - Image Rollovers
- Home
- Images
- Rollover Images
- Image Maps
- Navigation Bar
Dreamweaver makes is super easy for you to create nifty rollovers. A rollover uses two images. To do this project, get two images of the same dimensions. Basically we're going to use Dreamweaver's JavaScript to tell the browser to replace one image with the other when the user mouse or rolls over the image. If your images are not the same pixel size DW will resize the second image by using the size of the first image and distorting the second. Oh, by the way, you don't have to know a thing about JavaScript to create an Image Rollover. DW does it behind the scenes. If you do want to learn how it's done, open the Code Inspector or Show Code and Design Views of your Document Window as you work.
Preparing an Image Rollover
- Prepare 2 images of the same pixel dimensions. By convention, image dimensions are listed with width first followed by height. Here I have two images that
are both 400w x 60h. I will use these in this demonstration. You're welcome to copy these two images to your computer by right-clicking or control-clicking and saving images to disk. Then you can use them for your rollover too.
- After you determine which images you are going to use, click the cursor where you'd like to insert the rollover.
- Go to the Common Category of the Insert Panel and click on the dropdown arrow to the right of the Image button.
Choose the Rollover Image option. This will bring up the Insert Rollover Image Dialog Box. DW enters a default name for the image based on how many images you already have on your page. Keep the Preload Rollover Image checked.
- Click Browse to >select the Original Image. The Original Image is the one that is displayed in the Up position before the user mouses or rolls over the image.
Dreamweaver opens the Original Image window from which you can select your image.
- Now Browse for the Rollover Image and DW will open the Rollover Image Window (check the title bar on your window) to select the image that will replace the
original when the user mouses over.
- After selecting your Original and Rollover images, enter the URL to send the user to a linked page. You see the Image Rollover is actually a link. If you don't
want the user to be sent anywhere, type javascript:void(0); to create a null link. The rollover will still take effect.
- Preview in Browser to see your first rollover.
Later in the course I'll show you how to do Disjointed Rollovers where you click on something in one place of your document screen and it affects the images in another area on your screen.
Let's quickly review the Image Dropdown menu on the Common Category of the Insert Panel again.
After you insert the Rollover Image, the icon for the Image in the Insert Panel will be a Rollover Image icon. DW assumes that you might do a series of Rollovers. Take a look at your Common Insert Bar now and see if the image of a tree is replaced with the image of a rollover image. Also, remember that you can use keyboard shortcuts or the Insert Menu to insert any of these objects onto your page.
* click the link below to continue with this lesson *
Image Maps
