Create Multiple Links On A Single Image With Image Map

Print View Mobile View

Image Map is a feature that has been around for a while now. Using it you can create multiple “Hot Spots” linking within a single image, without having to slice the image for linking.

All the logos are on a single image below, hover or click on each of logo to see the link.

Image Map Demo

WordPressDrupalDrupalJoomla!

Image maps can be created manually or if you like to get things done in an easy and quick way, there are several free applications available too. You can find them in this post.

Attributes for the Map tag

Before beginning, lets take a look at the attributes of map tag.

<map name="map-name">
<area shape="map shape"
coords="map coordinates"
href="area URL"
target="URL target"
title="area title"
alt="alternate text"/>
</map>

Map Name: Give a unique name to the map. This helps in identifying each map if you include more than one on a page.
Area and Shape: The area 

tag identifies which hot spot is being used. There are three different shapes (hot spots) that can be used in image maps. They are as follows:

  • Rect (rectangle): To use this shape, you’ll need to define the top-right and bottom-left co-ordinates.
  • Circle: Define the center co-ordinate (the point in the center of the image) and it’s radius size.
  • Polygon: This is used when you can’t use neither of the above hot spots. This shape uses co-ordinates of the points in order. Eg. If you’re going to have a triangle, then you need to list all three co-ordinates, one after the other, in order.

Coords (co-ordinates): You can get an image co-ordinate using MS Paint or Photoshop (press F8).

Image Map Co-ordinates

Write down the co-ordinates one by one while inserting them into your document. You’ll need different co-ordinates depending on what type of “hot spot” you’d like to use.

Final code will look something like this:

<map name="Map">
<area shape="circle" coords="104,151,95" href="http://wordpress.org" target="_blank" title="WordPress" alt="WordPress" />
<area shape="poly" coords="267,76,290,64,296,42,311,60,326,70" href="http://drupal.org" target="_blank" title="Drupal" alt="Drupal" />
<area shape="rect" coords="404,53,596,247" href="http://www.joomla.org" target="_blank" title="Joomla!" alt="Joomla!" />
</map>

Free Online Tools to Create Image Maps

If you don’t want to create an image map manually there are free online tools available using which you can just drag and drop shapes. Just insert the final code code that they provide into a page you want.

Online Image Mapper

Online Image Mapper

Online Image Map Editor

Online Image Map Editor

Image Maps using Dreamweaver

Dreamweaver provides an easy way to create an image map on your desktop.

Start by creating a new blank HTML document, and insert an image on which you would like to make multiple links. Next click on the image to activate the “properties” panel.

Image Map in Adobe Dreamweaver

There you will find three hotspot tool: rectangle, circle, and polygon. Select the tool you want and create a shape over the image area that is to be linked. With the shape selected, fill in the link URL, target, and alt fields.

Repeat this for other areas and finally go to the code and copy.

That’s it! You have now created an image map.

If you want to insert the image in a WordPress post, simply copy everything within the <map> </map> tags and paste it into the post, in HTML view. Remember to add usemap="#Map" into the img src tag.

11 thoughts on “Create Multiple Links On A Single Image With Image Map”

Comments are closed.