HTML Code

<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

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

  <title>usemap — basic example</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}.hint{font-size:.8125rem;color:#64748b;margin-top:.75rem}</style>

</head>

<body>

  <h1>Image map with usemap</h1>



  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Crect width='100' height='150' fill='%2393c5fd'/%3E%3Crect x='100' width='100' height='150' fill='%2386efac'/%3E%3Crect x='200' width='100' height='150' fill='%23fcd34d'/%3E%3Ctext x='50' y='80' text-anchor='middle' font-size='14' fill='%231e293b'%3EA%3C/text%3E%3Ctext x='150' y='80' text-anchor='middle' font-size='14' fill='%231e293b'%3EB%3C/text%3E%3Ctext x='250' y='80' text-anchor='middle' font-size='14' fill='%231e293b'%3EC%3C/text%3E%3C/svg%3E" width=300 height=150 alt="Three-zone diagram: A, B, and C" usemap=#zone-map>



  <map name=zone-map>

    <area coords=0,0,100,150 href=https://example.com/a alt="Zone A" target=_blank>

    <area coords=100,0,200,150 href=https://example.com/b alt="Zone B" target=_blank>

    <area coords=200,0,300,150 href=https://example.com/c alt="Zone C" target=_blank>

  </map>



  <p class=hint>Click the blue, green, or yellow region. Each <code>&lt;area&gt;</code> opens a different link.</p>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML usemap Attribute — clickable regions