CODEWITHSUNDEEP
htmlcss
Goos
Goos

Reputation: 19

Image map doesn't work all the time

Image map works on other documents except this one. Is there any error? Or is there any reason Chrome doesn't load it? 

<html>
<head>

CSS

<style>
body {
      background-color:rgb(221,160,221);
}
h1,p {
      font-family:courier;
      color:white;
}
h1 {
    text-align:center;
}
</style>
</head>

Body

<body>
<h1> Find the Difference </h1>
<hr color="white">
<p> Welcome to this game <br>
Hope you have a frustrating time finding the difference... </p>

The images

<img src="Dod2.jpg" height="522" width="368" alt="Please change your browser as it doesn't support this file type"> 
<img src="Dod.jpg" height="522" width="368" alt="Please change your browser as it doesn't support this file type" usemap="#dod">

Image Map

<map name="dod">
<area shape="poly" coords="523,194,477,215,480,234,481,254,493,268,521,228,540,218,556,213,550,201" alt="Sorry, your browser doesn't support this function." href="https://en.wikipedia.org/wiki/Beak" target="_blank">
</map>

</body>
</html>

Upvotes: 1

Views: 1628

Answers (1)

AlexSkorik
AlexSkorik

Reputation: 504

First of all <area> coords does not correspond to its shape. For shape="rect" there must be only 4 coordinates see on MDN.

Another problem is that the area coordinates seems going beyond the size of the image. In your example image size is 368x522. But even the first pairs of coordinates (X,Y) from coords attribute (X=523, Y=194) already outside the picture. So it seems that this map just does not correspond to you image. Try to generate a new map.

Upvotes: 1

Related Questions