How to Create Clickable Maps in HTML

It is important that you integrate interactive elements into your site. If you want to show your readers a map of a certain place, for example, rather than just presenting a plain image, it is best to make the sections of the map clickable.
Basically, you will link different sections of your image to multiple pages.  The clickable and linkable sections of your map are called hotspots.

Here’s how you can create a clickable map in HTML:

1.    Choose a map image with well-defined regions. Use an image editing software to even enhance and thicken borders that separate each region. Save your image in GIF or JPEG format.How to Create Clickable Maps in HTML

2.    Find the coordinates of each region. You can find the coordinates of an image by using an editing software. Just hover the mouse on the image and you will get a pair of comma-separated numbers at the bottom of your screen. The numbers represent a point in the image where your mouse is currently at. The coordinates will change as you move the mouse over your image.

3.    Create your image hotspots. You can have a circular, rectangular or polygon hotspot.
Rectangular hotspot – you will need the top-left coordinates and bottom-right coordinates of your hotspot region.
Rectangular hotspot format: 108, 124, 250, 110
The first two values represent the top-left coordinated, while the last two values represent the bottom-right coordinates
Circular hotspot – you will need to find the coordinates of the center of the circle and a calculated radius of the circle. The radius of the circle is the distance to its center to any point on the circle.
Circular hotspot format: 285, 400, 43
The first two values correspond to the center of the circle, while the last value represents the radius of the circle.
Polygon hotspot – if the hotspot region can’t be put inside a rectangle or circle, then you need to use the polygon hotspot.
Polygon hotspot format: 76, 97, 50, 68, 90, 82
The above example shows the coordinated of a triangle. Each pair of coordinates corresponds to a point of the triangle.
Before you start with the next step, make sure that you map out all coordinates and label then properly with a name.

4.    Name your image map. Use this format:

<map name=”name_of_your_map”>
    (insert area tags here)
</map>

Replace ‘name_of_your_map’ with whatever you choose to name your map and insert your tags in the specified section. You can use the syntax provided below:

<area shape=”insert_hotspot_shape_used” cords=”insert_coordinates_here” herf=”insert_link”>

Shape: shape value can either be rect, circle or poly
Coords: the coordinates of your shape. Consult the mapping notes you’ve made in Step 3.
Href: the webpage URL where you want to redirect your readers after they click on a hotspot section

5.    Place the image map in your page. To display the map in your web page, you should use the following syntax:

<map name=”name_of_your_map”>
<area shape=”rect” cords=”125,170,100,85” href=”http://www.firstlinkhere”>
<area shape=”circle” cords=”159,400,40” href=”http://www.secondlinkhere”>
<area shape=”poly” cords=”76, 97, 50, 68, 90, 82 href=”http://www.thirdlinkhere”>
</map>
<img scr=”image.gif” usemap=”#name_of_your_map”>

Image by maple (freedigitalphotos.net)

Article By: Wasim Ismail

Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.


Comments are closed.

Three Measures To Keep Track Of A Cell Mobile Phone appforspy.com mobile tracker app