W3U Customer Support

How to Use Imagemaps

Imagemaps allow the user to click on predefined sections of a graphic picture on your web page and have the server respond as if they clicked on a text hyperlink.

There are two ways to design your image maps.  These are 'server side' where the imagemap file is executed by a script on our server, and the other is 'client side' where the imagemap file is executed after it is downloaded to the web visitor's computer.

Case I -  When you design a 'server side' imagemap, you will add code to your web document which resembles that in the following example:

1.Add the ISMAP attribute to the image element in your source code. 

<IMG SRC="/path_to_imagemap_image/image.gif" ISMAP>

2.Place a hypertext anchor around the image element which points to the imagemap program. 

<A HREF="http://yourdomainname/path_to_imagemap/image.map">
<IMG SRC="/path_to_imagemap_image/image.gif" ISMAP></A>

where the image.map file will typically be create by your imagemap software.

Case II  -  When you design a 'client side' imagemap, you will add code to your web document which resembles that in the following example:

<map name="sample">
<area shape="rect" coords="20,27,82,111" href="hotspot1.html">
<area shape="circle" coords="129,113,29" href="hotspot2.html">
<area shape="rect" coords="21,158,170,211" href="mailto:webmaster@ihip.com">
<area shape="default" nohref>
</map>

3.Include the map file code within the desired HTML document and reference it like so: 
<img border="0" src="image.gif" usemap="#sample">

Substitute the name of the desired image above and note the relationship between the HTML tag, <map name="sample"> and the usemap="#sample" attribute above. You can test your new client-side imagemap offline if the links refer to files on your local PC.

In either case, you will need an imagemapping tool.  We recommend MapEdit (PC) and WebMap (Mac).

A complete tutorial is available. The tutorial includes a sample imagemap and references to other useful tools. You are encouraged to review the entire tutorial.

Top