|
Definition and UsageThe The Note: The Applies toThe
Browser SupportThe
|
How to add An image map, with clickable areas - HTML usemap Attribute
Click on the banner, the phone, or the cup of coffee to go to a new page and read more about the topic.
index.html
Example:
HTML
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Output should be:
How to add An <object> element using an image map - HTML usemap Attribute
Note: The usemap attribute of the object element is not supported in Chrome, Edge, Safari, and Opera.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The object usemap attribute</h1>
<object data="https://horje.com/avatar.png" width="145" height="126" usemap="#planetmap"></object>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p><b>Note:</b> The usemap attribute of the object element is not supported in Chrome,
Edge, Safari, and Opera.</p>
</body>
</html>
Output should be:
| html usemap attribute |
| How to add An image map, with clickable areas - HTML usemap Attribute | HTML Attribute |
| How to add An <object> element using an image map - HTML usemap Attribute | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded: | 6 days ago |
Uploaded by: | Admin |
Views: | 22 |
Reffered: https://www.w3schools.com/tags/att_usemap.asp