ACOM: Web Design Tutorial Site

The USEMAP attribute

Remember what I said about the "transparency" analogy. Putting USEMAP in your <IMG> tag basically says, "there's an image map (transparency) which I want the browser to lay over this image". This doesn't affect in any way the rendering of the image, so all other attributes (ALT, HEIGHT/WIDTH, SRC, possibly others such as BORDER) can appear as before. (It is a good idea to use HEIGHT and WIDTH when creating images as maps, as you do need to ensure the browser renders the image in the size you expect. Although it usually will anyway, best to be 100% sure.) USEMAP then takes a value of the name of the map being used.

(Sometimes you see ISMAP, but this attribute is involved in a slightly-different technique known as server-side image maps. As it is unlikely you will have administrator access to a server, you will not be able to use these therefore I am not teaching them. USEMAP is for client-side image maps. The "client" is the reader of the page; what "client-side" means is that the image map is applied by the reader's computer (via the techniques I'm about to show you) rather than the host computer. But all in all, and having dragged you screaming to the end of this parenthetical note, I wouldn't worry about it...)

As you'll see on the very brief page about the <MAP> tag, image maps take the NAME attribute in the same way as anchor tags (and other features of HTML we haven't yet investigated). And remember that when you want to point to a NAMEd anchor, you need to use the hashmark (#) character to refer to that NAME. The same applies in USEMAP. These are the only additions you need to make to the actual <IMG> tag in order to turn it into a map.

So, to refer back to the example used on the introductory page, this image has the following tag: <IMG SRC="samerica.jpg" ALT="A map of South America" HEIGHT=300 WIDTH=218 USEMAP="#samerica"> I haven't actually defined the code of the map, samerica, in this HTML file so there aren't any hot spots on this image. I'll build it up as we go through the next few pages. Note also that the inclusion of ISMAP/USEMAP gives the image a "link border", even though it's not enclosed within <A> tags. To prevent this, add BORDER=0 to the <IMG> tag.

Do note that while you're limited to one map per occurrence of an image, there's no reason why you couldn't duplicate an image on another web page - or even, further down the same web page - and have an entirely different map apply to it. All you do is change the value of USEMAP. Keep that analogy of the image and the transparency in your mind and remember that you can always lay a different transparency over the image, if one's prepared.

Back to the top

Back to the menu for lesson 7