how to map an image using html with the area tag?

Hi :)

I'm going to show you how to use the area tag to create a map of links in an html image.

It is very simple, you just need:

- to have an image where you will set the "usemap" attribute with your map's name
- to define the areas and the links inside of a map tag

Just like that:

<img src="url/to/your/image.jpg" usemap="#Map" />

<map name="Map" id="Map">
    <area href="#url1" shape="rect" coords="0,0,250,250" />
    <area href="#url2" shape="rect" coords="251,0,500,250" />
</map>

In this example I have an image with width=500px and heigth=250px
and the left half is a link to #url1
and the right half is a link to #url2

But I recommend you using a tool to generate these areas. That is a good tool: http://imagemap-generator.dariodomi.de/

---------------

If you want to learn more: http://www.w3schools.com/tags/tag_area.asp

---------------

And when you use a map, maybe you will see a blue border around your areas, if you want to remove these borders just put this code in your CSS:

map area{
    outline: none;
}

or just add

style="outline: none"

in each area that you create

---------------

And you can use another shapes instead using a rectangle, but I won't show here how to do that :(

---------------

That's all!
Adriano Schmidt