Tutorials Point

  HTML Tutorial
  HTML References
  HTML Tools
  HTML Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  


previous AddThis Social Bookmark Button


With mouse-sensitive, ismap-enabled image maps, the browser is required to pass along only the URL and mouse coordinates to the server. Converting the coordinates into a specific document is handled by the document server. The conversion process differs between servers and is not defined by the HTML or XHTML standards.

You need to consult with your web server administrators and perhaps even read your server's documentation to determine how to create and program an image map. Most servers come with some software utility, typically located in a /cgi-bin/imagemap directory, to handle image maps. And most of these use a text file containing the image map regions and related hyperlinks that is referenced by your image map URL to process the image map query.

Consider following example:

<a href="/cgi-bin/logo.map" target="_self" >
<img ismap src=/images/html.gif alt="HTML" border="0"/>

Then the browser sends the following search parameters to the HTTP server which can be processed by a cgi script or map file:


Now to map incoming coordinates you will have a image map file that describes the sensitive regions in our example image:

# imagemap file=logo.map
default index.htm
circ    100,   30,   50                 link1.htm
rect    180,   120,  290, 500           link2.html
poly    80,    80,   90,  72,  160,  90 link3.html

Each sensitive region of the image map is described by a geometric shape and defining coordinates in pixels, such as the circle with its center point and radius, the rectangle's upper-left and lower-right edge coordinates, and the loci of a polygon. All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL.

An image-map processing application typically tests each shape in the order in which it appears in the image file and returns the document specified by the corresponding URL to the browser if the user's mouse x,y coordinates fall within the boundaries of that shape. That means it's okay to overlap shapes; just be aware which takes precedence. Also, the entire image need not be covered with sensitive regions: if the passed coordinates don't fall within a specified shape, the default document gets sent back to the browser.

This is just one example of how an image map may be processed and the accessory files required for that process. Please contact your webmaster and server manuals to discover how to implement a server-side image map for your own documents and system.

But you always have option to use client side image maps. They are relatively easy to implement. So go through client side image map given in the same chapter.

previous Printer Friendly