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:






Category:
Web Tutorial
Sub Category:
HTML Image Maps
Uploaded by:
Admin


Read Article
https://develop.horje.com/learn/1434/reference