[Bleuachdu]

You can straight up do it in HTML.

First you need to use the tag <MAP> and name it.

[code:bc76e] <MAP NAME="joe"> [/code:bc76e]

Next you need to figure out which shape, coordinates you want maped, and linked using the <AREA> tag. There are 3 variables you'll need in the <AREA> tag: SHAPE, COORDS, HREF.

[code:bc76e]<AREA SHAPE="" COORDS="," HREF="">[/code:bc76e]

The SHAPE tag also has 3 variables: RECT, CIRCLE, POLYGON. Using SHAPE=RECT will give you a rectangle, SHAPE=CIRCLE will give you a cirlce using a specified radius and location and the SHAPE=POLYGON will yield a multisided user-defined shape.

[code:bc76e]<AREA SHAPE="CIRCLE" COORDS=",," HREF="">[/code:bc76e]

The COORDS tag dictates where the chosen SHAPE will be drawn on the image in a standard X,Y fashion. Use photoshop or some other photo editing program to figure out which coordinates you will use. The RECT variable requires you place the Top Left Corner and Bottom Right hand corner coordinates in that order in the <AREA COORDS=> tag. The CIRCLE variable require you to place a center point and radius in that order in the <AREA COORDS=> tag. The POLYGON again requires you to put in the Top Left and Bottom right coordinates, but in this case you can put in multiple points in between.

[code:bc76e]
<AREA SHAPE="RECT" COORDS="50,50,30,30" HREF="">
<AREA SHAPE="CIRCLE" COORDS="100,100,15" HREF="">
<AREA SHAPE="POLYGON" COORDS="125,110,100,100,39,48,125,10" HREF="">
[/code:bc76e]

Finally, the HREF variable allows you to link the map to a certain area. use this just as you would use it in the Anchor <A> tag. You can use direct and indirect links.

[code:bc76e]
<AREA SHAPE="RECT" COORDS="50,50,30,30" HREF="http://www.teamaftermath.com">
<AREA SHAPE="CIRCLE" COORDS="100,100,15" HREF="http://www.alliedassault.com">
<AREA SHAPE="POLYGON" COORDS="125,110,100,100,39,48,125,10" HREF="#Forums">
[/code:bc76e]

Now that you've made an image map, you need to make it work with an image. The HTML you've created will do nothing unless you make it work with something else. To do this for an image, use the <IMG> tag as normal, and place the USEMAP="" variable inside the tag. A # should be placed in front of the map name.

[code:bc76e] [img]http://www.teamaftermath.com/images/insultpics/stfu.jpg[/img][/code:bc76e]

Now to put it all together....

[code:bc76e]
<MAP NAME="joe">
<AREA SHAPE="RECT" COORDS="50,50,30,30" HREF="http://www.teamaftermath.com">
<AREA SHAPE="CIRCLE" COORDS="100,100,15" HREF="http://www.alliedassault.com">
<AREA SHAPE="POLYGON" COORDS="125,110,100,100,39,48,125,10" HREF="#Forums">
</MAP>

[img]http://www.teamaftermath.com/images/insultpics/stfu.jpg[/img]
[/code:bc76e]

There ya go, that should do it. Note that I made up all of those coordinates, they probably aren't logical and won't work.