Skip to content

Instantly share code, notes, and snippets.

@EncodeTheCode

EncodeTheCode/coordinate_imahe_map.htm

Created May 22, 2024 06:50
Show Gist options
  • Save EncodeTheCode/348288775a5a0f7b61cc1ae52ef68a54 to your computer and use it in GitHub Desktop.
Save EncodeTheCode/348288775a5a0f7b61cc1ae52ef68a54 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
coordinate_imahe_map.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Example with Star Shape</title>
</head>
<body>
<!-- Define the image with usemap attribute referencing the map -->
<img src="example.jpg" alt="Example Image" usemap="#example-map" width="600" height="400">
<!-- Define the map -->
<map name="example-map">
<!-- Define a rectangular area -->
<area shape="rect" coords="34,44,270,350" href="http://example.com/rect" alt="Rectangle Area">
<!-- Define a circular area -->
<area shape="circle" coords="337,300,44" href="http://example.com/circle" alt="Circle Area">
<!-- Define a polygonal area -->
<area shape="poly" coords="360,40,400,40,420,100,360,120" href="http://example.com/polygon" alt="Polygon Area">
<!-- Define a star-shaped area -->
<area shape="poly" coords="300,60, 323,150, 400,150, 340,200, 360,280, 300,230, 240,280, 260,200, 200,150, 277,150" href="http://example.com/star" alt="Star Area">
</map>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment