BLHteacher | Resources | Project

ISMAPs and USEMAPs

One way to enable an image map is by adding the ISMAP attribute to a <img> tag placed inside an anchor tag (<a>). When the user clicks somewhere in the image, the graphical browser sends the relative x,y coordinates of the mouse position to the server that is designated in the anchor. A special server program then translates the image coordinates in the HTML document.

A good use of an image map might be to locate a hotel while traveling. For instance, the user clicks on a map of the region they intend to visit, and an image of a map might return the names, addresses, and phone numbers of local accommodations.

The ISMAP and USEMAP attributes for the <img> tag tell the browser that the image is selectable by the mouse as a visual map with one or more hyperlinks.

For example:

<a href="http://pages.ivillage.com/blhteacher2/images/Rockies.gif"> <map name="Rockies.gif"> <img src="Rockies.gif" ismap></a> </map>

The browser automatically sends the x,y position of the mouse (relative to the upper left corner of the image) to the server when the user clicks somewhere on the ISMAP image.

The USMAP attribute provides a CLIENT-SIDE image map that effectively eliminates server- side processing of the mouse coordinates and numerous delay problems.

Rather than depending on a web server, the USEMAP attribute for the <img> tag and the <map> and <area> tags allow HTML authors to embed all the information the browser needs to process an image map in the same document as the image. Because of their reduced network bandwidth and server independence, client- side image maps are becoming increasingly popular among HTML authors.

While very powerful and visually appealing, these standard so-called "server-side" image maps mean that HTML authors must have some access to the map's coordinate-processing program on the server. Many authors don't even have access to the server. A better solution is to take advantage of "client-side" image maps.