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

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>

CodePudding user response：

Try giving a width and height to the image and try again.

something like this: width="400" height="379" <area shape="rect" coords="34,44,270,350" href={your url}>

<figure>
  <img src="https://via.placeholder.com/447" alt="Ferris Family" usemap="#portait_map" width="447" height="447" />
  <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>

CodePudding user response：

<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.