HTML Image Maps on Clients side

As we know that a Web site stays on a server to be viewed by the whole world. The contents of the website are also put on the server for the audience. Developers, most of the time, want to lessen the burden of the server as long as possible. Hence the use some techniques like Client Side Image Maps to reduce the burden of the server.

One of the main draw backs of the current ability to create image maps is the processing of the map coordinates resides on the server. Not only is this an in-efficient use of the server resources, but it is oftentimes cumbersome and the ability to create image maps is often times out of reach of the end users.

The use of client side image maps allows the coordinates for an image map to be placed within the HTML code, and places the burden of processing these coordinates on the browser, and thus making more efficient use of the distributed processing of server vs. client.

Note: This Section describes how to define client side image maps. However this feature is not supported for some browsers. Hence check your browser compatibility for this feature.

A new attribute is defined of the <IMG> tag as shown in the following example:

<img src="name-of-gif-file.gif" usemap="#map-name-goes-here">

<map NAME="map-name-goes-here">
     <area coords="83,68 162,116" href="http://www.domainName.com/dira/">
     <area coords="172,67 273,115" href="http://www.domainName.com/dirb/">
     <area coords="280,67 377,116" href="http://www.domainName.com/dirc/">
     <area coords="23,120 95,166" href="http://www.domainName.com/dird/">
     <area coords="108,120 185,167" href="http://www.domainName.com/dire/">
     <area coords="195,120 302,166" href="http://www.domainName.com/dirf/">
     <area coords="310,119 375,166" href="http://www.domainName.com/dirg/">
</map>

Notice the NAME attribute within the <map> tag directly relates to the USEMAP attribute defined in the <IMG> tag. - This is all there is to defining a client side image map. To create the coordinates, you will want to use a piece of software that will generate the coordinates for you.