With the <area> element it is possible to create clickable areas within an image; The <area> element must contain child elements called <map>, which are the ones that allow the clickable areas to be created as such through the coordinates established in it as attributes; Below is the table of contents:
- Attributes of the <area> element.
- Use of the <area> and <map> element.
1. <area> element attributes
The main attributes for the <area> element are used to:
| alt | Specify an alternative text. |
| coords | Specify the coordinates of the area; Depending on the number of parameters, it indicates a different figure:
|
| download | Specify a resource (file) for download. |
| href | URL. |
| target | Specific where the new window will open, referenced in the href attribute. |
You can check the rest of them in the W3C.
2. Use of the <area> and <map> element
An image must be defined through the <img> tag and subsequently the clickable areas are defined with the coordinates established as an attribute of the <area> element, in turn a usemap attribute is established for the image that indicates the name of the < map>which we will define later:
<img src="sistema_solar_planetas.png" width="700" height="300" alt="planetas del sistema solar" usemap="#planetasmap">
Now we define the <map> element whose children are <area> elements, the coords attribute is established for each of these elements; For our example we will define as many <area> with their coordinates as there are planets in the Solar System; In addition, a name attribute must be defined for the <map> element whose value is the one established in the image through the usemap attribute (usemap = name):
<map name="planetasmap">
<area shape="circle" coords="35,224,17" href="#" alt="Mercury">
<area shape="circle" coords="95,220,26" href="#" alt="Venus">
<area shape="circle" coords="165,217,29" href="#" alt="Tierra">
<area shape="circle" coords="241,219,31" href="#" alt="Marte">
<area shape="circle" coords="392,226,66" href="#" alt="Jupiter">
<area shape="circle" coords="512,233,28" href="#" alt="Saturno">
<area shape="circle" coords="600,231,28" href="#" alt="Urano">
<area shape="circle" coords="668,229,28" href="#" alt="Neptuno">
</map>
Possible uses of the <area> and <map> elements
A common use is to reference <area> to pages (via the href attribute); you can also reference resources for download (through the download attribute):
Click the planets in the following example:
It may be a little complicated trying to guess the coordinates to obtain the exact position that you want to mark through the coordinates, luckily there are image editing software such as Gimp or Photoshop that have tools that indicate the position of the cursor over the image, which results in a great help in obtaining the coordinates.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter