How to make image maps in HTML5 ?
The HTML <map> tag is used to define image maps in HTML. The areas inside the image which are clickable are defined by using the <area> tag.
Syntax:
<map name="map-name">
Attribute value:
- name: It is used to associate the map with the image in which it is used.
Note: The name attribute in the map must have same value as image’s usemap attribute.
Example: In this example, the highlighted area is the mapped area, clicking on it will lead to the website.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head><body> <img src= alt="gfgimage" usemap="#mapID"> <map name="mapID"> <area shape="rect" coords="34, 44, 270, 350" </map></body></html> |
Output:
Please Login to comment...