System Tools

Image Mapping

What is "Image Mapping" ?

The concept is to make some parts of a picture "interactive". Thus when you'll pass the pointer of your mouse over a specific area, you'll be able to associate an action or dynamically modify the picture in case of click on this area.
Those functions are simple and written in simple HTML. No need to learn a programing language. To facilitate the use of that feature, there are some free on-line tools which generate automatically the HTML code, according to the result you want obtain.

From my point of view, the most interesting one is, you'll be able to upload our own picture and edit active areas with an on-line graphic user interface and implement your own link or actions. This tool will generate the HTML code and you just have to copy and paste it onto your own web page.

All the examples below are generated from this on-line tool.

Fist example : Link an area of a picture to an URL

Several zones are active on the face below and are linked to an external website.

Eye Nose Mouth Ear Ear Hair Image Map
   Copyright Allan Barbeau
To create that picture, you should insert 5 rectangle areas and one custom shape "polygon" where points define outlines.

face maps
For each zone, a link points to a specific article of Wikipedia, related to the part of the face you clicked on.

Second case : Dynamic map opening a specific file

Three countries are active on that picture : France, Spain and Germany. When passing  over their colors will change and if you click the browser will open the image. 
France Germany Spain Image Map

Third example : Create a dynamic menu

Here you have an example of a menu, where each item will change its background color when passing the cursor over it. No need to know a programing language or configure a module. It's only a matter of simple HTML tags, fully compatible with all browsers. More simple than CSS, and you can use whatever you want : text, icons, pictures ... No Limit.
Link to Webmastips Link to Youtube Link to Wikipedia Link to Google Image Map


Last example : Hide a link

Knowing that any zone of an image can hide a link, you can use this function to hide a link towards a specific page of file. In the example below, a link is accessible when you'll pass the mouse pointer over the tittle of the "i".

Secret   Image Map  
Security : Pay attention on how you are using this fonction !!!
Hiding a link in a visible way does not mean it will be invisible or protected. Source code of the HTML page contain the link to the page or the specified file.
Thus those links will be indexed by search engines. Don't use that method to protect confidential information or access to administration area of your web site.

For further information ...

In most cases, you'll always have to modify the code generated by the mapping tool in order to fit your needs. It's quite simple to understand how it works and change links or options.

For those who want to have a better knowledge or want to write HTML code by themselves, please refer to the W3C article dedicated to image maps.

You have no rights to post comments

Select your language :