Image Mapping

You can create more than one link to a image with a process called "image mapping" The user will be directed to a different site or page depending on what portion of the image they click on.

For example, in the image below if you click in the white square with the Google name you will be taken to Google's site. Same with the square containing the yahoo name. The two black dead zone squares are not linked and as you hover your mouse over them you will see that the cursor's icon changes from a hand in a linked area, to an arrow in unlinked areas.

Here is the code used to produce the above image map:

<div style="text-align: center;"><img src="http://image address.jpg" usemap="#test" border="0" />
</div><map name="test">
<area shape="Rect" coords="0,0,89,89" href="http://www.google.com">
<area shape="Rect" coords="90,90,179,179" href="http://www.yahoo.com">
</map>

You can see by the areas highlighted in red that the linked areas are defined by X and Y coordinates starting from the top left corner of the image. These cordinates are measured in pixels. There are additional geometric shapes that can be used with the map command as well, here are some example areas and their corresponding coordinates"

area shape="rect" coords="0,0,0,0"
area shape="poly" coords="0,0,0,0,0,0,0,0"
area shape="circle" coords="0,0,0"

The cirlcle is defined with the X and Y of its center followed by its radius in pixels. The poly is defined by the X and Y of three or more points.

I typically use Corel Draw to determine the cordinates for creating my mapped images by setting the page scale to pixels. I then set the top left corner of the image to zero and as I cursor across the image the coordinates are displayed in the bottom left corner of the screen. Photo Paint also works for this in a similar fashion.

For those of you without access to these programs, there is a site online that will help you out. It's called the Poor Persons Mapper. Its free utility written by Chris Seidel that when you enter the URL of a jpg or gif image it will in turn create a web site of the image and as you mouse over and click, it gives you that points coordinates.

Image mapping is a great way to make custom menus for your side bar or even out of your header. Here is a more complex example. This should provide you with an introduction to mapping and for more detail tutorials just google "image mapping".

Technorati Tags: image mapping, blogger, custom menus, blogatech, corel draw