Search code examples
htmltooltipimagemap

HTML Image Map Not Displaying Tooltips


My image displays fine on the webpage. However, only the first area title shows in a tooltip when hovering over any part of the image. The other areas will not show. Here is the html I have.

<html>

<map name="eyfsplayarea">
  <area shape="circle" coords="930,300,70" alt="The Mud Kitchen and Digging Zone" title="The Mud Kitchen and Digging Zone">
  <area shape="circle" coords="790,200,50" alt="The Niagara Channelling System, Water Table and Water Wall" title="The Niagara Channelling System, Water Table and Water Wall">
  <area shape="circle" coords="890,180,20" alt="The Sand Tray" title="The Sand Tray">
  <area shape="rect" coords="323,150,850,100" alt="A Sheltered Covered Area Linked to the Building" title="A Sheltered Covered Area Linked to the Building">
  <area shape="circle" coords="600,200,40" alt="A Roadway, Numeracy and Literacy Zone" title="A Roadway, Numeracy and Literacy Zone">
  <area shape="circle" coords="400,300,70" alt="Physical Development and Role Play Zone" title="Physical Development and Role Play Zone">
  <area shape="circle" coords="690,300,90" alt="Physical Development and Role Play Zone" title="Physical Development and Role Play Zone">
  <area shape="circle" coords="246,612,104" alt="The Storytellers Chair, Phonics and Mark Making Zone" title="The Storytellers Chair, Phonics and Mark Making Zone">
  <area shape="circle" coords="244,190,54" alt="Role Play House with Chalkboard" title="Role Play House with Chalkboard">
  <area shape="circle" coords="593,615,105" alt="Den Posts" title="Den Posts">
  <area shape="circle" coords="1360,619,93" alt="The Language Lounge" title="The Language Lounge">
</map>

<img src="/EYFS-Outdoor-Play-and-Learning2.jpg" width="1621" height="725" alt="EYFS Play and Learning" usemap="#eyfsplayarea">

</html>


Solution

  • The answer to this question was that circle areas in image maps have three values, the x position, the y position and the radius of the circle. Prior to editing they had the same number of parameters as the rectangles, and later their radius value was larger than the source image.