Mapping your Image

There are two basic tools which I use to map images: Adobe Photoshop and Map This. Both of these should be used in conjunction with an actual drawing of the image and the areas to be mapped. This will simplify both the mapping of the image and the filing of what's been mapped and how. It's also a good way to keep from losing perspective of the image and the math of the mapping.

It is possible to use other shapes for mapping than rectangles, but don't. Not all browsers support this, and keeping the link the viewer is looking for as simple as possible is a definite plus. One way to do this is to provide the maximum amount of space around the image link as possible. Note: all coordinates must meet on the X and Y axis so that there are no 'empty' or unmapped spaces between one part of the image and the other - again, you don't want to confuse or lose the viewer when clicking on the image doesn't take them anywhere. Example: if the first mapped area of your image has the coordinates of 40,10 150,35 the mapped area beneath that would have coordinates such as 40,40 150,160.

All mapped images should have both server side and client side maps. The server side is to be placed in the map directory for that site, and the client side will be on the page itself.

Server Side Map

rect /nameofpage.html 40,10 150,35
or
rect /http://www.nameofsite.com/nameofpage.html 40,10 150,35

repeated as many times as you have links/coordinates. There are no html tags on this page, and it should be named the same as the map/image you are mapping and be relevant/concise. Note: there is a space, rather than a comma, between the first two coordinates and the last two in the Server side map.

Client Side Map

This should be beneath all HTML for the page (other than the body and html closing tags) and marked at beginning and end by comment tags.

<!--End of HTML for the page, the rest is the map(s)-->

<!--Beginning of 'nameofmap' Map-->

<MAP NAME="nameofmap">

<AREA SHAPE="rect" HREF="http://www.nameofsite.com/nameofpage.html" COORDS="40,10,150,35">
<AREA SHAPE="rect" HREF="/nameofpage.html" COORDS="40,40,150,60">
<AREA SHAPE="rect" HREF="/nameofpage.html" COORDS="50,65,125,100">

</MAP>

<!--End of 'nameofmap Map->

Note: all coordinates are seperated by commas, but no spaces.

Resources/Guides

Clickable Image Maps - Tutorial