Image Maps
What are images maps? Simple, for example, you have a picture, with your menu on, and instead of linking this picture to a page, you need to link it to several pages, you can allow your visitors to go on a page by clicking on a part of the picture, and to an other page by clicking an other part.
<img src="image_url.gif" usemap="#Map" alt="" />
You need to add the attribute usemap you can rename Map by whatever you want but never forget the # before it, it's the anchor. First, here is an exemple of a rectangular hotspot.
<map name="Map">
<!-- BOX 1-->
<area shape="rect" coords="x1, x2, x3, x4" href="page1.htm" alt="" />
<!-- BOX x -->
<area shape="rect" coords="xx, xx, xx, xx" href="page2.htm" alt="" />
</map>
Significance:
x1 : pixels from the left at the beginning of the rectangle
x2 : pixels from the top
x3 : pixels from the left at the end of the rectangle
x4 : height of your rectangle
To add more boxes, you will have to copy the box 1 code, then paste it and change the coordinate attribute. You can add as many spots as you want.
Let's see circular hotspots, they are the same as rectangular but it's circles! It's obvious, nope?
<map name="Map">
<!-- CIRCLE 1-->
<area shape="circle" coords="x1, x2, x3" href="page1.htm" alt="" />
<!-- CIRCLE x -->
<area shape="circle" coords="xx, xx, xx" href="page2.htm" alt="" />
</map>
Significance:
x1 : pixels from the left for the circle's center
x2 : pixels from the top for the circle's center
x3 : the circle's radius
Same as before, you can add as many circles as you want, just copy a line and paste it.
Now, the last category, polygonal hotspots, they are a little bit more complicated. Have you learned vectors at school in maths? It's the same! For exemple, let's make a triangle. Don't forget to put the usemap thing in your picture's tag. The coordinates are a little differents from the circles and the rectangles. Each point you'll place will have 2 coordinates, x & y, exactly like in a grid, in maths.
<map name="Map">
<!-- POLYGON 1-->
<area shape="poly" coords="x1, x2, y1, y2, z1, z2" href="page1.htm" alt="" />
<!-- POLYGON x -->
<area shape="poly" coords="xx, xx, xx, xx, xx, xx" href="page2.htm" alt="" />
</map>
Significance:
x1 : pixels from the left for the first point
x2 : pixels from the top for the first point
y1 : pixels from the left for the second point
y2 : pixels from the top for the second point
z1 : pixels from the left for the third point
z2 : pixels from the top for the third point
See? They are like couples. Then, the first point will join the second point and this second point will join the third point to make your triangle! Of course, it's polygons, so you can add as many points as you want. I hope this tutorial helped.
Of course, for each category of hotspots, you can change the target, add title, alt, etc. To learn how to determinate the X1, X2, etc. by yourself, read this tutorial.
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)