Now you should know all you need to know to start making image maps on your own. There are, however, some issues that you should keep in mind.

One thing that is important to think about is your audience. Remember that the client-side image mapping hasn't always been around. Older browsers will not be able to understand these image maps. Also, what about those text based browsers? Yeah, yeah, who still uses those? You never know. Because of these cases, you should not rely totally on the image map. Allow for some alternate links just bellow it or at the bottom of the page.

Another thing you may want to spend some time with is the future uses of you image map. What is meant by this? Well, if you look at our example image you will see a lot of shapes that could be used for something, but what? I don't know, but perhaps I will some time in the future. It may be a good idea to define the areas of shapes that you may use in the future while you are grabbing the coordinates of the others. This way, when you come back sometime later with an idea, then you will have these already ready for you. Remember that you can use the nohref attribute in the area tag, this will allow you to setup the shape, but have it inactive.

One last thing, comments. I don't know about you, but reading a nicely formatted description of what the area will define is easier then coming back to the map and trying to figure out where the rectangle at coordinates (3,4) and (23,45) are located.

Here is an example of our image map, with these three issues addressed (Note: the filler shapes are inactive):

TUCOWS
[ Linuxberg | All Macintosh | PDA Central | Gaming Place | Free Themes | eBarn ]
Here we have the code for all this:

<map name="tucowsNetwork"> <!-- Top --> <area shape="rect" coords="2,3,248,23" href="javascript:network()"> <!-- Text: TUCOWS Network --> <area shape="circle" coords="356,16,15" href="javascript:cowHeads()" alt='Pic of the "Two Cows"'> <!-- Cow head --> <area shape="rect" coords="256,15,334,22" href="http://www.tucows.com" alt="TUCOWS"> <!-- TUCOWS URL --> <!-- Shapes --> <area shape="polygon" coords="9,28,37,28,37,56" nohref> <!-- triangle 1 --> <area shape="polygon" coords="6,29,6,57,34,57" nohref> <!-- triangle 2 --> <area shape="polygon" coords="310,56,338,56,338,28" nohref> <!-- triangle 3 --> <area shape="polygon" coords="341,28,341,56,370,56,370,28,360,34,351,34,342,28" nohref> <!-- shape under the Cow head --> <!-- Network URLs (left) --> <area shape="rect" coords="54,28,145,35" href="http://www.linuxberg.com" alt="Linuxberg"> <!-- Linuxberg --> <area shape="rect" coords="54,39,161,46" href="http://www.allmacintosh.com" alt="All Macitosh"> <!-- All Macintosh --> <area shape="rect" coords="54,49,151,56" href="http://www.pdacentral.com" alt="PDA Central"> <!-- PDA Central --> <!-- Network URLs (right) --> <area shape="rect" coords="201,27,310,34" href="http://www.gamingplace.com" alt="Gaming Place"> <!-- Gaming Place --> <area shape="rect" coords="201,39,300,46" href="http://www.freethemes.com" alt="Free Themes"> <!-- Free Themes --> <area shape="rect" coords="201,49,275,56" href="http://www.ebarn.com" alt="eBarn"> <!-- eBarn --> </map> <center> <font size="1"> <img src="../images/tucowsNetwork.gif" usemap="#tucowsNetwork" width="372" height="59" border="1" alt="TUCOWS Network Image Map"> <br> <a href="http://www.tucows.com">TUCOWS</a> <br> [ <a href="http://www.linuxberg.com">Linuxberg</a> | <a href="http://www.allmacintosh.com">All Macintosh</a> | <a href="http://www.pdacentral.com">PDA Central</a> | <a href="http://www.gamingplace.com">Gaming Place</a> | <a href="http://www.freethemes.com">Free Themes</a> | <a href="http://www.ebarn.com">eBarn</a> ] </font> </center>

Have a comment or question dealing with this tutorial? Write us!

<<Back