CODEWITHSUNDEEP
htmlcssimagemap
Nina
Nina

Reputation: 13

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>

Upvotes: 1

Views: 1491

Answers (3)

Makis Milas
Makis Milas

Reputation: 147

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>

Upvotes: 2

Search Imtiyaz
Search Imtiyaz

Reputation: 120

hi there is problem with your coords apart from spell mistakes..may be your cords are not proper check image size and coords over image there is nothing else wrong code is perfect there is problem with coords you put there.
try below coords:

<area shape="rect" coords="34,44,270,350" alt="Brain" href="brain.html">

Upvotes: 1

Marik Ishtar
Marik Ishtar

Reputation: 3049

You have incomplete closing tag </map, also no <html> tag,

This is your code:

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

Try this example:

<!DOCTYPE html>
<html>
<body>
  <img src="https://www.imore.com/sites/imore.com/files/field/image/2015/03/mac-switch-thumbnail-padded_0.jpg" alt="Workplace" usemap="#workmap" width="400" height="400">
  <map name="workmap">
    <area shape="rect" coords="8,10,324,280" alt="Computer" href="https://www.google.com">
  </map>
</body>
</html>

Upvotes: 1

Related Questions