Horje
What is HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

 


Full Example of HTML Image Maps

Here is the HTML source code for the image map above:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Output should be:

Full Example of HTML Image Maps
Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2





Related Articles
What is HTML Image Maps HTML Image Maps
How Does it HTML Image Maps? HTML Image Maps
How to create HTML Image Map HTML Image Maps
How to create HTML Image Imap Shape="circle" HTML Image Maps
How to create HTML Image Map Shape="poly" HTML Image Maps
How to create HTML Image Map and JavaScript HTML Image Maps

Single Articles
Full Example of HTML Image MapsHTML Image Maps

Read Full:
HTML Image Maps
Category:
Web Tutorial
Sub Category:
HTML Image Maps
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
59



Share on: