Image Map Example


Porsche 911 Carrera S

../images/porsche.jpg

Click on a part for order information.


We want to make some links on the picture that will allow visitors to access corresponding links to order parts for our car. We need to find out the coordinates of various aspects of the image. Right-click and copy the above image so that you can follow along. Open the image in Microsoft Paint. When you move your pencil icon over the image, you will be able to see the coordinates of the pencil in the status panel on the bottom of the Paint window:

../images/imagemappic1.jpg

Move your pencil to the center of the front wheel (in Paint, not here!). You should notice that the coordinates match those shown in the above photo: (448,202)
Next move your pencil horizonatally over to the edge of the wheel. Note the difference in your X coodinate. That is the radius of the wheel. You should come up with about 42. We can now code and test our first hot spot:

<map name="carmap" id="carmap">
<area shape=circle coords="448,202,42" href="http://www.1010tires.com/wheels.asp" target="_blank" alt="wheels" title="Wheels info">
</map>

<img src="porsche.jpg" alt="porsche.jpg" usemap="#carmap">

You should end up with an image map like below:

Wheels info

../images/porsche.jpg


Polygon maps are the most useful, so let's see how to use the poly option. As with the first example, use Paint to help you locate the coordinates of the shape you are plotting. Write down the coordinates of each side of the polygon. Simply do one line at a time.

Let's do the car door. Find the bottom left corner of the door. You will end up with a point very close to (256,208). (Don't worry, you don't have to be exact!) Now find a point in the upper left side of the door. I used (212,143). We have mapped the first side of the polygon. Continue picking points which outline the door. Your coordinates should be similar to this:

<area shape=poly coords="254,205,213,145,228,132,360,134,382,146,380,209"
href="http://www.usedpartx.com/hotline/doors.html?make_name=Porsche&part_type_name=Doors" target="_blank" alt="doors">

Insert this code as your next shape in the map and you should end up with this:

Wheels info Doors info


Finished Car
(view source)

Wheel info Wheels info Door info Lights Info Lights info Lights info

../images/porsche.jpg