htmlcssimageimagemap

Can anyone help me figure out why my image map isn't working?


The dimensions of the image itself are 447 x 447. I've tried different formats and literally copying and pasting a post from Chegg but nothin is working.

<figure>
  <img src="https://via.placeholder.com/447" alt="Ferris Family" usemap="#portait_map" />
  <figcaption>Kathleen Ferris and daughter Linda (1957)</figcaption>
</figure>

<map name="portrait_map">
  <area 
    shape="rect" 
    coords="10, 50, 192, 223" 
    href="tb_kathleen.html" 
    alt="Kathleen Ferris"
  />            
  <area shape="circle" coords="264, 108, 80" href="tb_linda.html" alt="Linda Ferris-White">
</map>


Solution

  • <figure>
      <img src="https://via.placeholder.com/447" width="447" height="447" alt="Ferris Family" usemap="#portrait_map">
      <figcaption>Kathleen Ferris and daughter Linda (1957)</figcaption>
    </figure>
    
    <map name="portrait_map">
      <area shape="rect" coords="10,50,192,223" alt="Kathleen Ferris" href="tb_kathleen.html">
      <area shape="circle" coords="264,108,80" alt="Linda Ferris-White" href="tb_linda.html">
    </map>

    @xense was somehow right about giving width and height to the image element but its not necessary, you can try removing the width and height attributes and it should still work. Also there was a typo in your code.