Tutorial 3. Creating Image Rollover Links

Dreamweaver allows even a neophyte to use tricks only a Web developer of some experience used to be able to do. Creating JavaScript rollover links is one of them. Everyone knows what a rollover is: when a user's mouse rolls over a link, either text or image, some change occurs that draws attention. This tutorial will concentrate on the kind of rollover made with JavaScript: an image rollover.

1. Remembering the two arrow links from turorials 1 & 2 . Remember this image from Tutorial 1? This is how you sliced the arrows. Already you've made these into links on each gallery page in Tutorial 2.

2. Look again at creating alternate images in Tutorial 1. In the first tutorial, when the time came to switch out the bread photo with the oranges, we ranamed the image area slice and re-output a new image for our Image folder. Check back at how this is done; we won't go over it again in this tutorial.

3. Back in Photoshop, rename arrow layers. Return to Photoshop and focus on the two layers that contain the right and left arrow images, seen above with the slices that contain them. Rename the layers with the word "OFF" in them by double clicking on the layer name and entering. For the example image, "R arrow" will become "R arrow OFF".

4. Duplicate arrow layers and name . The renamed layers can be seen in this graphic. Using the Layers palette rolldown (flag 1), roll down and select "Duplicate Layer" (flag 2). Name new layers as a variant of their original, for example, "R arrow ON" above.

5. Alter the appearance of the arrows. Above, you can see that the copy of the arrow called "ON" has been altered using Image > Adjustments > Hue/Saturation. The idea is this: this version of the arrow is what will appear when the mouse rolls over the arrow image—thus it will be "on"; when the mouse is away, the original colored arrow will show, as an "off" state.

5. Rename the slices in preparation for making alternate images. Using the Slice Select tool, double click on the two arrow slices and rename the slices using "01" instead of "00". Now you see the reason we named them "00" in the first tutorial: "00" equals "off" and "01" equals "on".

6. Export "on" versions of buttons . As you did in Tutorial 1, select the arrows' slices and use "Save for the Web …" as a selected slice, settings shown above. In your Images folder, you should see. Remember always to save to the site folder in exactly the same way; this will ensure your new images arrive at the right Images folder for the site.

7. Check out new images in site folder . If you've done everything right, you should see two version of your arrow button in your site folder's Images folder. Above, you can see "backbutton_00.jpg" and backbutton_01.jpg".

PART II: Return to Dreamweaver to create rollovers.

Now that you've created alternative images for your forward and back buttons in Photoshop, you're ready to make use of them for creating rollovers. In this part of the tutorial, we'll use Dreamweaver to identify the two states/images of the rollover button, and have it make it for us.

8. Get rid of current arrow link code . We're going to dump the buttons (images + links) we made in the other tutorials and replace them from scratch with our rollovers. First, in Dreamweaver's split view, click on the back arrow in the lower window (flag 1) — this should cause the image tag to turn blue in the upper window (flag 2). Now locate the table cell tag (flag 3, <td>). Once you've done this, locate the "end table cell" tag (not flagged, </td>). In dreamweaver, they are by default color-coded green.

OK, in the upper window, the code view, you're going to highlight EVERYTHING between the begin and end table cell tags — <td> … </td>. Delete all of it. Every single bit.

9. Get ready to insert rollover. With the table cell empty (flag 1), your code should look as above, with nothing between the tags — <td> … </td>. In the design (lower) half of the Split View, the back arrow should be gone, and an empty space where it used to be (flag 2). NOTE: if you click on the bottom part to see the empty space left by the now gone back arrow, you will lose your place in the upper part and have to find it again.

In the upper window (the code), place your cursor just after the end caret (>) of the begin table cell tag (<td>). This is where the rollover will go.

10. Begin insertion of rollover . With the insertion point correctly after the begin table cell tag, from the Main Menu, go Insert > Image Objects > Rollover Image, as above.

10. Enter image locations in the "Insert Rollover Image" dialogue box. After choosing the menu item, a dialogue box will appear. In the graphic above, the original image has already been browsed to and selected (flag 1); The "rollover image" is now being located (flag 2). When the "Browse…" button for the Rollover Image is clicked, a browse window will appear. The alternate image for the back arrow, "arrow on", is selected, that is, "backbutton_01.jpg" (flag 3).

11. Enter linked page location in the dialogue box. Now you've selected the two images that make up the rollover, it's time to identify which page will be loaded in the browser when the new button is clicked (flag 1). Click the "Browse…" button (flag 2), and browse to gallery_03.html: since we're on page 1, the back button will take you to the last page in the sequence, page 3.

11. Verify entries and confirm . When your rollover link information is complete, the dialogue box will look something like this, above. If you want, you may issue an Image name that fits your system, and text for an alt tag that will play when a user hovers over the button with the mouse. When satisfied, press "OK".

There's no reason not to check the "Preload rollover image" box: this will place the command to preload the alternate image for the rollover in the Body tag of the page. This will ensure that the alternate image is ready when the rollover is activated, obviating the need for download time.

12. Don't touch the new rollover JavaScript. When you clicked "OK", you gave Dreamweaver the green light to chuck a whold lot of JavaScript into your webpage. Compare what's between the <td> … </td> now to what you had in step 9. Unless you want to do a bunch of study to understand what the JS is doing, DON'T TOUCH THE CODE.

If something is wrong with the resulting rollover button delete all the code between the <td> … </td> and start over. Don't try to fix the JS unless you have a lot of time on your hands and a lot of curiosity about how it works.

13. Look at, but don't touch, the JavaScript in the Head . Up in the <head> of your page, a whole lot of JavaScript has been written for you by Dreamweaver, as above. Don't touch this!

If things aren't working, delete the WHOLE script tag from <script type="text/JavaScript"> to </script> in the pages "Head" tag. Then try inserting the rollovers again.

14. Test the rollover. Save the page, then test the rollovers. If you did things right, the arrows should seem to change color when the mouse rolls over them, and when clicked, they should take you to the correct page.

15. Repeat this procedure shown in Part II for the forward button. Since this is a gallery, the back button of the first page will load page 3 of the three-page gallery!

16. FINISH. The second two pages are still open in DW; hook up their buttons the same way you did in page 1, linking to the appropriate pages. The 3 gallery pages should load with their forward and back arrows as before.