HTML Code

<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content="width=device-width,initial-scale=1">

  <title>usemap — shape types</title>

  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}img{max-width:100%;height:auto;border:1px solid #cbd5e1;border-radius:8px}ul{margin:.75rem 0 0;padding-left:1.25rem;font-size:.875rem}.hint{font-size:.8125rem;color:#64748b;margin-top:.75rem}</style>

</head>

<body>

  <h1>Area shape types</h1>



  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' viewBox='0 0 320 160'%3E%3Crect width='320' height='160' fill='%23f1f5f9'/%3E%3Ccircle cx='80' cy='80' r='50' fill='%23bfdbfe'/%3E%3Cpolygon points='200,30 260,130 140,130' fill='%23bbf7d0'/%3E%3Crect x='240' y='20' width='60' height='120' fill='%23fde68a'/%3E%3C/svg%3E" width=320 height=160 alt="Diagram with circle, triangle, and rectangle zones" usemap=#shape-map>



  <map name=shape-map>

    <area shape=circle coords=80,80,50 href=https://example.com/circle alt="Circle region" target=_blank>

    <area shape=poly coords=200,30,260,130,140,130 href=https://example.com/triangle alt="Triangle region" target=_blank>

    <area coords=240,20,300,140 href=https://example.com/rect alt="Rectangle region" target=_blank>

  </map>



  <ul>

    <li><strong>rect</strong> — <code>coords="left,top,right,bottom"</code></li>

    <li><strong>circle</strong> — <code>coords="centerX,centerY,radius"</code></li>

    <li><strong>poly</strong> — <code>coords="x1,y1,x2,y2,..."</code> corner points</li>

  </ul>



  <p class=hint>Coordinates are in pixels relative to the top-left of the image (natural size).</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML usemap Attribute — circle and polygon