Home How-To Sharing Build Your Own Web Gallery
Monday, August 25, 2008

Build Your Own Web Gallery

A step-by-step guide with screenshots for building your first website

This Article Features Photo Zoom

STEP 5i: Creating Navigation With A Rollover Image


Insert Rollover Image command on Toolbar.

We're ready now to move on to our navigation buttons. We're going to add them to the same cell as our "page" graphic that we just added. Place your cursor immediately after the <img> tag for the "page" graphic in the code on line 28 and go to "Insert > Image Objects > Image Rollover" or select the command from the drop-down in the "Common" tab of the Toolbar. You'll see the following dialog:


Give your rollover a unique name, then browse to your files for the first rollover, in this case, "1.gif" and "1-o.gif". Make sure "Preload rollover image" is checked, add alternate text if you like, and finally enter the link to the page where the button will take your visitors. For button number 1, that page is the home page, or "index.html".

Note that after inserting the first rollover, Dreamweaver has generated a bunch of new code at the top of the document. This is JavaScript to make the rollovers work. You don't need to touch the JavaScript at all. You can ignore it.

Repeat this step to add the second button immediately after the first rollover in the code, which is now on line 53. In the dialog box for the second rollover, I entered "page2.html" for the button's link, and must remember to save my second page of the gallery with that name.


Code with rollovers inserted.

Here is our code view with the image rollovers inserted and all of the new JavaScript at the top. If you're working with a text editor and not Dreamweaver, you can copy this JavaScript code from the tutorial source files you downloaded.


Split display showing Code and Design Views of our progress.

Here's where everything stands in our Code and Design Views. Now's a good time to sit back a bit and compare the code to the design, review the code we've added so far and how it all relates, and generally get a better grip on HTML overall. Make sure you understand where all of the tags begin and end, and compare the code now to the early screenshots that were basically empty, if you're not totally sure of yourself yet. We're almost done, though, so when you're ready, we'll do a few tweaks to the design to make it look really sharp.


Preview of site in Safari.

Before we continue on, let's preview our progress in a web browser. Go to "File > Preview In Browser" and select one from the list. Here's our page in Safari. It looks pretty good, but could use some alignment fixes and extra space, or "padding" around some of the objects. We'll make these adjustments by adding attributes to the cell tags.


Add Comment


  • International residents, click here.
Check out our other sites:
Digital Photo Pro Outdoor Photographer HDVideoPro Golf Tips Plane & Pilot