Image Map Example
If you use image maps, use client-side image maps with Alt text for the linked hotspots. Alt text can be supplied for links in image maps by inserting the attribute in the AREA tag.
Note: The image and each coordinate of the Image Map must have an alt tag.
Example
To see the alt tags, first place your mouse over the main picture. Then place your mouse over each of the links in the picture.
This was created by inserting the image into the document:
- <img src="Arches21.jpg" alt="Photo of Las Positas College Campus">
- Then add the image map to the <img> tag
- <img src="Welcome2.jpg" alt="Photo of Las Positas College Campus" usemap="#map1">
- Finally create the image map and add alt tags for each of the coordinates: <map name="map1"> <area shape="rect" coords="11,251,73,276" href= "http://www.laspositascollege.edu/accessibilty" alt="Guidelines Home" title="Guidelines Home"> </map>
Source Code
To insert alternative text into your image map directly through HTML, find your image map <area> tags in your HTML code and add the alt information. It will look simillar to this:
<img src="image.jpg" alt="Alternative Text Information" usemap="#map_name">
<map name="map_name">
<area shape="rect" coords="11,251,73,276" href="live_url_link.htm" alt="Alt Text Information" title="Title Information">
</map>
Portions of this website are used with permission from Penn State University.