Client-side image map examples 

In the following example, we create a client-side image map for the OBJECT element. We do not want to render the image map's contents when the OBJECT is rendered, so we "hide" the MAP element within the OBJECT element's content. Consequently, the MAP element's contents will only be rendered if the OBJECT cannot be rendered.

<HTML>
   <HEAD>
		  <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
		 <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
		 <MAP name="map1">
		   <P>Navigate the site:
		   <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		   <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		   <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		   <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A><
		 </MAP>
		 </OBJECT>
   </BODY>
</HTML>

We may want to render the image map's contents even when a user agent can render the OBJECT. For instance, we may want to associate an image map with an OBJECT element and include a text navigation bar at the bottom of the page. To do so, we define the MAP element outside the OBJECT:

<HTML>
   <HEAD>
		  <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
		 <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
		 </OBJECT>

		 ...the rest of the page here...

		 <MAP name="map1">
		   <P>Navigate the site:
		   <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		   <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		   <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		   <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A>
		 </MAP>
   </BODY>
</HTML>

In the following example, we create a similar image map, this time using the AREA element. Note the use of alt text:

<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <P>This is a navigation bar.
   </OBJECT>

<MAP name="map1">
 <AREA href="guide.html" 
				  alt="Access Guide" 
				  shape="rect" 
				  coords="0,0,118,28">
 <AREA href="search.html" 
				  alt="Search" 
				  shape="rect" 
				  coords="184,0,276,28">
 <AREA href="shortcut.html" 
				  alt="Go" 
				  shape="circle"
				  coords="184,200,60">
 <AREA href="top10.html" 
				  alt="Top Ten" 
				  shape="poly" 
				  coords="276,0,373,28,50,50,100,120">
</MAP>

Here is a similar version using the IMG element instead of OBJECT (with the same MAP declaration):

<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">

The following example illustrates how image maps may be shared.

Nested OBJECT elements are useful for providing fallbacks in case a user agent doesn't support certain formats. For example:

<P>
<OBJECT data="navbar.png" type="image/png">
  <OBJECT data="navbar.gif" type="image/gif">
		text describing the image...
  </OBJECT>
</OBJECT>

If the user agent doesn't support the PNG format, it tries to render the GIF image. If it doesn't support GIF (e.g., it's a speech-based user agent), it defaults to the text description provided as the content of the inner OBJECT element. When OBJECT elements are nested this way, authors may share image maps among them:

<P>
<OBJECT data="navbar.png" type="image/png" usemap="#map1">
  <OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
		 <MAP name="map1">
		 <P>Navigate the site:
		  <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		  <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		  <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		  <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,100,120">Top Ten</A>
		 </MAP>
  </OBJECT>
</OBJECT>

The following example illustrates how anchors may be specified to create inactive zones within an image map. The first anchor specifies a small circular region with no associated link. The second anchor specifies a larger circular region with the same center coordinates. Combined, the two form a ring whose center is inactive and whose rim is active. The order of the anchor definitions is important, since the smaller circle must override the larger circle.

<MAP name="map1">
<P>
<A shape="circle" coords="100,200,50">I'm inactive.</A>
<A href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm active.</A>
</MAP>

Similarly, the nohref attribute for the AREA element declares that geometric region has no associated link.