Image Map Links
Making different parts of a picture a link
DescriptionImage maps allow you to make different parts of one image into different links.
Code
<IMG SRC="http://www.activejump.com/images/sampleimagemap.jpg" USEMAP="#map1">

<MAP NAME="map1">

<AREA SHAPE="CIRC" COORDS="65,65,40" HREF="link1.html">
<AREA SHAPE="RECT" COORDS="22,142,210,215" HREF="link2.html">
<AREA SHAPE="POLY" COORDS="145,30,195,22,221,61,211,108, 162,118,128,78" HREF="link3.html">

</MAP>
Output
Practice
Using the Coordinates
Description----- Rectangle -----

For the rectangle, shape is replaced by "RECT". The rectangle requires four coordinate points, standing for each of the four lines of the rectangle. The first point is the left line, the second is the top line, the third is the right line, and the fourth is the bottom line. So for example, if I wanted to set the left line at 5, the top line at 5, the right line at 60, and the bottom line at 40, it would look like 5,5,60,40.

----- Circle -----

For the circle, shape is replaced by "CIRC". The circle requires three coordinate points, standing for vertical placement, horizontal placement, and size. The first point is the horizontal placement. The second is the vertical placement, and the third is size of the circle. So for example, if I wanted to set the horizontal at 30, the vertical 20, and size of the circle at 15, it would look like 25,30,60.

----- Polygon -----

For the polygon, shape is replaced by "POLY". The polygon has no limit on the number of coordinate points, you may use as many as you want to make any shape you want. The points come in pairs though. The first point is horizontal and the second is vertical. You can continue these pairs as long as you want. So for example, if I wanted to make a triangle, one point at 30 horizontal, 20 vertical, another point at 50 horizontal, and 20 vertical, and a third point at 40 horizontal, and 30 vertical, it would look like 30,20,50,20,40,30.
Code
n/a
Output
n/a
Practice
Advertisements