HTML Image Maps Guide

<!-- Solar System Image Map -->
<div class="relative mx-auto max-w-[800px] my-8">
  <img
    src="/images/html/Solar-system.png"
    alt="Solar system diagram"
    usemap="#solarsystem"
    class="border-2 border-white rounded-lg w-full h-auto"
    width="800"
    height="600"
  />
  
  <map name="solarsystem">
    <area alt="Sun - Our star" title="Sun - Our star" href="/html/image-maps/sun" coords="403,335,80" shape="circle" />
    <area alt="Mercury" title="Mercury - Smallest planet" href="/html/image-maps/mercury" coords="514,568,38" shape="circle" />
    <area alt="Venus" title="Venus - Hottest planet" href="/html/image-maps/venus" coords="470,130,38" shape="circle" />
    <area alt="Earth" title="Earth - Our home" href="/html/image-maps/earth" coords="210,338,41" shape="circle" />
    <area alt="Mars" title="Mars - The red planet" href="/html/image-maps/mars" coords="100,526,35" shape="circle" />
    <area alt="Jupiter" title="Jupiter - Gas giant" href="/html/image-maps/jupiter" coords="606,408,75" shape="circle" />
    <area alt="Saturn" title="Saturn - Ringed planet" href="/html/image-maps/saturn" coords="335,540,55" shape="circle" />
    <area alt="Uranus" title="Uranus - Icy gas giant" href="/html/image-maps/uranus" coords="665,215,50" shape="circle" />
    <area alt="Neptune" title="Neptune - Farthest planet" href="/html/image-maps/neptune" coords="242,155,40" shape="circle" />
    <area alt="Neptune" title="Pluto - Farthest planet" href="/html/image-maps/Pluto" coords="552,185,18" shape="circle" />
  </map>
</div>

<!-- Computer Parts Image Map -->
<div class="relative mx-auto max-w-[600px] my-8">
  <img
    src="/images/html/ComputerParts.png"
    alt="Computer parts diagram"
    usemap="#computerparts"
    class="border-2 border-white rounded-lg w-full h-auto"
    width="600"
    height="500"
  />
  
  <map name="computerparts">
    <area alt="CPU" title="Central Processing Unit" href="#cpu" coords="130,95,320,280" shape="rect" />
    <area alt="RAM" title="Random Access Memory" href="#ram" coords="590,75,687,330" shape="rect" />
    <area alt="GPU" title="Graphics Processing Unit" href="#gpu" coords="145,360,525,560" shape="rect" />
    <area alt="Motherboard" title="Main Circuit Board" href="#motherboard" coords="140,650,680,1125" shape="rect" />
  </map>
</div>

<!-- Smartphone Image Map -->
<div class="relative mx-auto max-w-[300px] my-8">
  <img
    src="/images/html/Smartphone.png"
    alt="Smartphone diagram"
    usemap="#smartphone"
    class="border-2 border-white rounded-lg w-full h-auto"
    width="300"
    height="600"
  />
  
  <map name="smartphone">
    <area alt="Screen" title="Touch Screen Display" href="#screen" coords="50,150,250,500" shape="rect" />
    <area alt="Home Button" title="Home Button" href="#home" coords="150,520,30" shape="circle" />
    <area alt="Speaker" title="Earpiece Speaker" href="#speaker" coords="120,80,180,100" shape="rect" />
    <area alt="Camera" title="Front Camera" href="#camera" coords="90,60,20" shape="circle" />
  </map>
</div>