How to make rollover images in HTML text

Written by scarlett gauthier
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make rollover images in HTML text
Create dynamic websites with the use of rollover images. (Jupiterimages/ Images)

With the millions of websites on the Internet, it is essential that your website be memorable and unique. One technique used to add a dynamic effect to websites is rollover images, also known as rollover buttons. Essentially, when the visitor rolls over an image, it will change to something else. When the user rolls off the image, it will return to the original graphic. Common rollovers include subtle effects such as changing the colour of the image or the typeface. You can create your own rollover image with basic HTML formatting in various web-design programs.

Skill level:

Things you need

  • Photo-editing software
  • Web-design software

Show MoreHide


  1. 1

    Create a new document of the desired size in pixels in photo-editing software such as Photoshop. Create the button and rollover images. The two images must be identical in size.

  2. 2

    Save both images separately by navigating to the "File" menu and clicking "Save." Save the images as either JPEG, GIF or PNG files. Although JPEG and GIF files are more commonly used, PNG files retain transparency. Ensure that you save the image in your website's local root folder.

  3. 3

    Open the desired web design software, such as Adobe Dreamweaver. Click the refresh button in your library to update the website's library and local root folder. Locate the images in the local root folder.

  4. 4

    Switch to the web page's "Code View" by selecting the Code View button.

  5. 5

    Type "<a href=" "><img src=" IMAGE1" onmouseover="this.src=' IMAGE2 '" onmouseout="this.src=' IMAGE1 '" alt="Click Me"></a>" without the opening and closing quotation marks into the code.

  6. 6

    Replace "" with the name of your website. Replace "IMAGE1" and "IMAGE2" with the name of your button and rollover images. Your rollover image will replace "IMAGE2," while "IMAGE1" stands for the initial button image.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.