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 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
- 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).
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.
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.
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”
I am trying to make an image map for my blog header so the social media icons in the header are clickable and link to the social sites. My blog is hosted on WP.org and am using the Thesis theme. The problem is it uses php and css so I am at a loss at where to put the html code or how to convert it to css. Any help would be appreciated. I have checked on WP.org forums and other people have asked the same question but no one had answered.
Thanks.
If you have already created an image map, inserting the code anywhere between the body tag would do. Also remember to add usemap=”#Map” to the header image code.
Another thing you could do is, include the header image inside a div container and add the map stuffs inside it. I guess that’s how the image is on this post.
You Rock! I’ve been looking for this solution for two days now in the forums and could not find where to place the html in WordPress for my image map. This worked perfectly! Great site!
Good post and thanks for the link to Online Image Map Editor, that I didn’t know (I was used to use dreamweaver).
Now the image map to my site is working: http://www.sitowebprofessionale.it/confronta-i-pacchetti-di-realizzazione-siti-internet.html
Thanks!
If you need one link that will open many of your links in tabs, I suggest you use Brief.ly or http://Many.at.
Great! thanks for the idea. Dreamweaver will be the easiest way !
Thank you for this great post!
I have tried to do that, and it works. I just have a little mistake….the attribute “alt” of images doesnt’t work. Here is code in header.php, my theme is twenty eleven.
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
else : ?>
<img src="” width=”” height=”” alt”” usemap=”#Map” />
Thanks again,
If you are using the exact code, the equal(=) sign is missing in it for “alt”. That might be the problem. Add that and see if it works. 🙂
I want to use this in Joomla 2.5, to replace my header logo png file. Can I still do that with this? Any suggestions?
I am having the exact same problem, only I’m very new at this and so I’m not sure where I find the body tag? Do I insert the code in functions or css?
You can find body tag in your theme’s index.php file. It starts with <body> just below the closing </head> tag.