Divide Images Into Many Links

You can divide an image into multiple regions that a visitor can click on. Each region will then have its own URL address and if a visitor click on a region, they will be taken to the corresponding web page.

The very first step that you have to do is to divide your image into the number of regions that you want. Once you have decided the location of each region, you then have to get the X and Y coordinates of this region. If you're using MS-Paint, you can find these coordinates, by looking at the bottom of the screen, you'll see two numbers separated by a comma. These are the X and Y coordinates respectively. Just move your mouse cursor to the location that you want to get the coordinates of.

For a rectangle or square region, you have to get the X and Y coordinates of the upper-left corner and the lower-right corner.



For a circular region, you have to get the X and Y coordinates of the center of the the circle.



For any other shaped region, you have to get the X and Y coordinates of each point or corners on the shape.




Once you have this information, you have to make an image map. You can then use the following code to make your image have many click-able regions.

<map name="map reference name">

<area shape="shape" coords="X, Y, X2, Y2" href="URL location of web page"/>

</map>

<img src="URL of where your image is stored" usemap="#map reference name"/>

The map reference name is just an name that you will use to identify this map. The code above only shows for a one region image. Simply type in: <area shape="shape" coords="X, Y, X2, Y2" href="URL location of web page"/> for as many region as you have.

The shape will have a value of either; rect, circle, or poly. Use rect if you have a rectangle/square region, use circle if you have a circular region, and use poly if you have any other shaped region.

The coords value that you enter will vary depending on the value of the shape.

If you use rect, the coordinates will be in the form; x1, y1, x2, y2. Where x1, y1 is the coordinate for the upper left corner and x2, y2 is the lower right corner.

If you use circle, the coordinates will be in the form; x, y, r. Where x, y is the center coordinate, and r is the radius.

If you use any other shaped region, the coordinates will be in the form; x1, y1, x2, y2, etc. Where each pair of coordinates represents a point.