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
