How To

How to Create a Rollover Link in Adobe Dreamweaver

Contributor
By Derek Lennon
eHow Contributing Writer
(1 Ratings)
Create a Rollover Link in Adobe Dreamweaver
Create a Rollover Link in Adobe Dreamweaver

Adobe Dreamweaver can be overwhelming, but making a rollover image or link is very simple. Rollovers are a great way to enhance your website. Rollovers show one image on the site, then as the viewer scrolls his mouse over the image, another image appears. A rollover image can reveal another image or it can link to another URL. Read on to learn how to create a rollover link in Adobe Dreamweaver.

Difficulty: Moderate
Instructions

Things You'll Need:

  • Adobe Dreamweaver
  • Images stored on your computer
  1. Step 1

    Open a new Dreamweaver page.

  2. Step 2

    Click where you want to insert the rollover image.

  3. Step 3
    Selecting from the Common Tab
    Selecting from the Common Tab

    There are two ways to insert a Rollover Image. One way to do this is from the menu bar at the top, click on "Insert > Image Objects > Rollover Image." Or another way, you can click on the "Common Tab (on insert bar) > Images > Rollover Image." A new menu box called "Insert Rollover Image" will appear.

  4. Step 4
    Insert Rollover Image Box
    Insert Rollover Image Box

    Type the name of the image in "Image Name."

  5. Step 5

    Browse through your computer to find the top image or "Original Image." Do the same for the bottom image or "Rollover Image."

  6. Step 6

    Click "Preload Rollover Image" to have the image load when the rest of the page loads, so there are no delays in loading time for your viewers.

  7. Step 7

    Type in "Alternate Text" another name for this image, for people who use text-only browsers and won't view your images.

  8. Step 8

    Enter a URL in the "When Clicked, Go To URL." A URL is a web address, like: http://www.ehow.com/. Only enter a URL if you want the rollover to link somewhere, otherwise it is unnecessary.

  9. Step 9

    Click "OK". You've created a rollover image/link.

Tips & Warnings
  • The original image will be seen first, when the mouse is scrolled over the rollover image will appear.
  • Use all lower-case letters to ensure there are no problems with the pages code.
  • You will not be able to see the rollover image rollover in Dreamweaver. Once you view your page in a browser, it will work.

Post a Comment

Post a Comment
  • Have you done this? Click here to let us know.
I Did This

Related Ads

Computers
Alexia Petrakos,

Meet Alexia Petrakos eHow's Computers Expert.

Get Free Computers Newsletters

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.   en-US

eHow Computers
eHow_eHow Technology and Electronics