Search code examples
htmlcssimagemap

Image mapping not working even following template

Ive been reading some of the questions already asked on the site but i still cant seem to find any issues in my code. However, when i run the page, there is nothing clickable on my image. Ive also compared it to the w3school.com code snippet on image mapping with the same results.

<!doctype html>
<html>
<head>
<title>Welcome!</title>
<style>
img     {display: block;
    margin-left: auto;
    margin-right: auto;}
    
</style>
</head>

<body>

<img src="bodymap.jpg" style="width:50%" usemap="#body">

<map name="body">
    <area shape="rect" coords="233,828,485,994" alt="brain" href="brain.html">
</map>

</body>

</html>

Solution

  • It appears you have some spelling errors. Try the following:

    img     {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:50%;
}
    <!doctype html>
<html>
  <head>
  <title>Welcome!</title>
  </head>

  <body>

    <img src="bodymap.jpg" usemap="#body">

    <map name="body">
      <area shape="rect" coords="233,828,485,994" alt="brain" href="brain.html">
    </map>

  </body>
</html>