Create Image Map

Instead of hyperlinked the image to single destination, you can hyperlink areas of the image to various destinations. There are many ways to allows different areas of the main image to be click-able by users. These click-able areas then link to different destinations that usually relate to the part of the image the user has clicked on. Image maps are very useful for all kinds of navigation reasons like schematics, floor plans, city, county, and country maps or even photo-tagging feature.

To achieve this effect you can use flash, javascript or opportunities that have long been offering by pure HTML. However, the manual identification of areas is very tiring, so better take advantage of tools that offer several types of shapes. It’s good idea to choose online tool, unlike others is completely web based and does not require any software to be downloaded. With those online image map tools you can simply upload your image, map out your links and get the HTML codes within few minutes. Especially if you have to use only one file.

All we have to do is to use <map> tag which is used to define a client-side image-map. An image-map is an image with clickable areas. There are two good & simple online tools:

• http://www.maschek.hu/imagemap
• http://www.image-maps.com/

Remember that the first from list above have support for all area shapes (circle, rectangle and polygon).

Notice that the image must be the first in your code, and image map gets a unique name so you need to associate the image with the new image map. That’s done by adding the new usemap attribute to the img, making sure to add a # to the name. The<map> tag is supported in all major browsers.

If you have 25.00 £ to spend you can use HTML Map Manager 2 (viryasoftware.com) – component which allowing you to create hotlink areas on images (clickable areas) and link to a Joomla menu item.