Question

图像地图适用于除此之外的其他文档。有什么错误吗？或者Chrome有什么理由不加载它？

<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>
<h1> Find the Difference </h1>
<hr color="white">
<p> Welcome to this game <br>
Hope you have a frustrating time finding the difference... </p>

图片

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

图片地图

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

Answer 1

首先，<area>坐标不符合其形状。对于shape="rect"，MDN上只能看到4个坐标。

另一个问题是区域坐标似乎超出了图像的大小。在您的示例中，图像大小为368x522。但即使是来自coords属性（X = 523，Y = 194）的第一对坐标（X，Y）已经在图片之外。因此，这张地图似乎与您的图像不对应。尝试生成新地图。

图像地图始终不起作用

1 个答案: