Client-Side ImageMaps (the better/easier way)

With client-side image maps, all of the map information can be specified in the same HTML file that contains the image. This has the following advantages:

• The number of server hits is reduced, and links are resolved faster.
• Destination links can be shown as the user's cursor moves over the map.
• Image maps can be created and tested locally, without requiring a server.
• Image maps can be accessed using protocols other than HTTP; conventional image maps only work with the HTTP protocol.
• Image maps are not server-dependent, making them portable.

Creating a client-side image map

As an example, this procedure will show how a simple navigation bar (image.gif) can be used as a client-side image map. Each button will be mapped to a different document.

To create a client-side image map:

1. Add the image to your HTML document as an inline image.

2. <img src="image.gif">
   

3. Add the USEMAP parameter to the img element.

4. The USEMAP parameter specifies the name of the map definition associated with the image. For this example, the map definition is named demobar. Since the map definition is in the same file, a filename is not required.

   <img src="image.gif"  usemap="img_maps.html#demobar">
   

5. Record the pixel coordinates of each region you want to define.

6. 

   Pixel coordinates begin at 0,0 in the upper-left corner of the image. Most graphic editors can be used to display pixel coordinates.

7. Create a map definition.

8. <map name="demobar"> 
   <area shape="rect" coords="24,18,143,41" href="previous.html">
   <area shape="rect" coords="168,18,287,41" href="next.html"> 
   </map> 
   

   This map definition maps the Previous button to a document named previous.html. The Next button is mapped to a document named next.html.

9. Here is the completed example:

10. 

    As you move the pointer over a mapped region, the URL of the document associated with the region is displayed in the status bar (at the bottom of most browsers). This visual feedback allows users to know what regions are mapped as well as the document that will be loaded.

    Server-side image maps cannot display this information because the URL information is located on the server and is not available until after the image has been clicked.

Defining non-rectangular regions

In the MAP element, the SHAPE and COORDS parameters are used together to specify the shape of mapped regions. The pixel coordinates required by the COORDS parameter depend on the shape specified by the SHAPE parameter.

<map name="name"> 
<area shape="shape"  coords="pixel coordinates"  href="url"> 
</map> 

Syntax:

<area shape="circle" coords="center-x , center-y , radius-x"  href="url" >

Specifies a circular region defined by the pixel coordinates of the center point followed by the radius in number of pixels.

<area shape="poly" coords="x1,y1 , x2,y2 , x3,y3 , ..."  href="URL" >

An irregular region defined by a series of coordinate (x,y) pairs.

<area shape="rect" coords="left-x, top-y , right-x, bottom-y"  href="URL" >

Specifies a rectangular region defined by the pixel coordinates of the upper-left and lower-right corners of the region.

Defining overlapping regions

In the following graphic, the blue and green regions are mapped to different URLs. Although the regions overlap, clicking on each region loads the appropriate document.

If two or more regions overlap, the region defined first in the map definition takes precedence over other regions. For example, in the map definition for the graphic above, the green region is defined before the blue region:

<map name="overlap"> 
<area shape="rect" coords="66,13,186,37"  href="green.html"> 
<area shape="rect" coords="195,43,245,46"  href="blue.html"> 
</map> 

Server-Side ImageMaps (the old way)

Note that the new server handles imagemaps differently than the old server. You need only change the way you refer to an imagemap.

Referencing your mapfile

Suppose the image is under your public_html directory and called imagmap1.gif and that the directive file is in the same place called imagemap1.map . Then the following code in any html file will work.

<a href="~you/imagmap1.map">
<img ismap src="~you/imagemap1.gif">
</a>

Example Mapfile

#Comments are printed in a 'formatted' or 'semiformatted' menu.
#And can contain html tags. <hr>
base referer
poly map "Could I have a menu, please?" 0,0 0,10 10,10 10,0
rect .. 0,0 77,27 "the directory of the referer"
circle http://www.inetnebr.com/lincoln/feedback/ 195,0 305,27
rect another_file "in same directory as referer" 306,0 419,27
point http://www.zyzzyva.com/ 100,100
point http://www.tripod.com/ 200,200
rect mailto:nate@tripod.com 100,150 200,0 "Bugs?"


Complete Documentation