Adobe Captivate 4

Showing text when a visitor rolls over a link or image on your website is a great way to share additional information about where a link leads or what an image contains. If you have access to edit the HTML code of your website, and know how to use link (A) and image (IMG) tags, you can easily incorporate rollover text.

Show Text on an Image Rollover

1. Step 1

   Find the HTML code for the image you want to add hover text for. It should look like this:

   <img src=”http://www.linkto.com/your/image.jpg” />

2. Step 2

   Add or edit the TITLE attribute containing the text you want to appear when someone rolls over the image.

   For example:

   <img src=”http://www.linkto.com/your/image.jpg” title=”Additional text to appear upon hover” />

3. Step 3

   Add or edit the ALT attribute containing the text you want to appear when someone rolls over the image. (For cross-browser compatibility, your desired rollover text needs to appear in both the ALT and TITLE attributes.)

   For example:

   <img src=”http://www.linkto.com/your/image.jpg” alt=”Additional text to appear upon hover” title=”Additional text to appear upon hover” />

4. Step 4

   Confirm your rollover is working by refreshing your Web page and holding your cursor over the image for one to two seconds.

Show Text on a Link Rollover

5. Step 1

   Find the HTML code for the link you want to add hover text for. It should look like this:

   <a href=”http://www.yourlink.com”> Link Text</a>

6. Step 2

   Add or edit the TITLE attribute containing the text you want to appear when someone rolls over the link.

   For example:

   <a href=”http://www.yourlink.com” title=”Additional text to appear upon hover”>Link Text</a>

7. Step 3

   Confirm your rollover is working by refreshing your Web page and holding your cursor over the link for one to two seconds.