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.