HTML Tutorials
Html What isHtml Comments
Html <!DOCTYPE>
Html A Type Tag
Html B Type Tag
Html C Type Tag
Html D Type Tag
Html S Type Tag
Html T Type Tag
Html H1-H6 Tag
Html Form Input
Html Phrase Tag
Html I Tag
Html U Tag
Html Hr Tag
Html Ul Tag
Html Pre Tag
Html Object Tag
Html Param Tag
Html Ol Tag
Html Noscript Tag
Html Noframes Tag
Html Meta Tag
Html Map Tag
Html Link Tag
Html Li Tag
Html Legend Tag
Html Ins Tag
Html Iframe Tag
Html Html Tag
Html Font Tag
Html Q Tag
Html P Tag
Html Img Tag
html Area Tag
The html <area> tag is used to link to inside of image and this called the image map and which tag always we will use to inside of <map> tag. After create in this image map if you click go to another page.The usemap attribute is use to relationship between the image and the map.
Example Code
<!DOCTYPE HTML>
<img src="images/html-5-image-map.jpg" usemap="#image_map" />
<map name="image_map">
<area shape="rect" coords="0,0,30,35" alt="A icons" href="free-icons/alphabet-characters/lower-case-letter/a-icon.php"/>
<area shape="rect" coords="0,0,70,50" alt="B Icons" href="free-icons/alphabet-characters/lower-case-letter/b-icon.php"/>
</map>
<img src="images/html-5-image-map.jpg" usemap="#image_map" />
<map name="image_map">
<area shape="rect" coords="0,0,30,35" alt="A icons" href="free-icons/alphabet-characters/lower-case-letter/a-icon.php"/>
<area shape="rect" coords="0,0,70,50" alt="B Icons" href="free-icons/alphabet-characters/lower-case-letter/b-icon.php"/>
</map>
Out Put :
In the above example A and B letter have in single image but if you click A image the link will go to alphabet a icons and if you click B icon the link go to alphabet b icon.
|
|
Tweet |
|
|