HTML Code

<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

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

  <title>shape — image map</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 1rem;font-size:1.25rem;color:#0f172a}img{max-width:100%;border:1px solid #cbd5e1;border-radius:6px;display:block}.hint{margin-top:1rem;font-size:.8125rem;color:#64748b;max-width:520px}code{background:#e2e8f0;padding:.1rem .35rem;border-radius:4px}</style>

</head>

<body>

  <h1>shape on &lt;area&gt;</h1>

  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Crect fill='%23f1f5f9' width='320' height='120'/%3E%3Ctext x='160' y='58' text-anchor='middle' fill='%23475569' font-family='system-ui' font-size='13'%3EClick the regions%3C/text%3E%3C/svg%3E" alt="Diagram with three clickable regions" usemap=#imageMap width=320 height=120>

  <map name=imageMap>

    <area coords=10,10,100,110 href=# alt="Left rectangle" onclick='return alert("rect"),!1'>

    <area shape=circle coords=160,60,45 href=# alt="Center circle" onclick='return alert("circle"),!1'>

    <area shape=poly coords=220,10,310,10,310,110,220,110 href=# alt="Right polygon" onclick='return alert("poly"),!1'>

  </map>

  <p class=hint>Three shapes: <code>rect</code>, <code>circle</code> (coords = cx,cy,radius), and <code>poly</code>.</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML shape Attribute — rect, circle, poly Image Map