Horje
How to create HTML Image Imap Shape="circle"

To add a circle area, first locate the coordinates of the center of the circle:

337,300

Then specify the radius of the circle: 44 pixels

Output should be:

Now you have enough data to create a clickable circular area:
index.html
Example: HTML 
<!DOCTYPE html>
<html>
<body>

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

<img src="https://itupto.com/uploads/demo/2023-09-09-07-14-37-workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Output should be:

This is the area that becomes clickable and will send the user to the page "coffee.htm":

Output should be:




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


Read Full:
 HTML Image Maps
Category:
 Web Tutorial
Sub Category:
 HTML Image Maps
Uploaded by:
 Admin
Views:
 107

Reffered: https://www.w3schools.com/html/html_images_imagemap.asp

 

Horje