| Rollover images are commonly used in Web development and are a piece of cake in Dreamweaver. For a rollover to occur in a Web browser, JavaScript must be present in the HTML document after all, the entire effect is JavaScript. If you don't know JavaScript, it's no big deal; Dreamweaver writes it for you. Inserting a Rollover Image Follow this exercise and complete the following steps to insert a rollover image into an HTML document. -
Download the file called rollover.zip from the companion Web site located at http://www.dreamweavermxunleased.com. After you've downloaded the file, unzip it to extract the two file images: button_up.gif and button_over.gif. -
Inside of Dreamweaver, in any document, place a blinking cursor in the area you want the images to appear. Click the Insert Rollover Image button under the Common tab in the Insert panel. This launches the Insert Rollover Image dialog box, as shown in Figure 4.39. Figure 4.39. The Insert Rollover dialog box has an option for creating graphics that change their appearance when moused over.
-
In the first text field, name the image. This is typically used for the JavaScript, so avoid spacing and special characters in your naming conventions. -
Browse for the file button_up.gif, which you downloaded to your computer for the original image. You can do this by clicking the Browse button and selecting the file from wherever it is located on your computer. -
Do the same for the rollover image text field. Browse for the button_over.gif. -
Type in some alternative text to appear within the alt tag. Again, this can play a role in how accessible your Web site is. -
Finally, you can link the button. You can either browse for a local file, or you can type in an absolute URL. If you leave the link blank, you can always fill it in later in the Properties Inspector. Click Done. -
You will return to the document with an image placed wherever your blinking cursor was. Choose File, Preview in Browser, Internet Explorer to see the new rollover image. Notice when you mouse over the image, it changes to the button_over.gif file as shown in Figure 4.40. Figure 4.40. Notice that the graphic changes its appearance when moused over.
|
NOTE It's important to note that you cannot modify the rollover image after you exit the Insert Rollover Image dialog box. If you want to change the artwork, you can do it manually through the code, or you can delete the rollover and reinsert it.
|
