How to Create a Rollover Link in Adobe Dreamweaver

How to Create a Rollover Link in Adobe Dreamweaver thumbnail
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.

Things You'll Need

  • Adobe Dreamweaver
  • Images stored on your computer
Show More

Instructions

    • 1

      Open a new Dreamweaver page.

    • 2

      Click where you want to insert the rollover image.

    • 3
      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
      Insert Rollover Image Box

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

    • 5

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

    • 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

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

    • 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

      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.

Related Searches:

Comments

You May Also Like

Related Ads

Featured