即使遵循模板，图像映射也不起作用

Question

我已经阅读了网站上已经提出的一些问题，但我似乎仍然无法在我的代码中找到任何问题。但是，当我运行页面时，我的图片上没有任何可点击的内容。我还将它与图像映射的 w3school.com 代码片段进行了比较，结果相同。

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

Answer 1

您的结束标签 </map 不完整，也没有 <html> 标签，

这是您的代码：

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

试试这个例子：

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

Answer 2

您似乎有一些拼写错误。尝试以下操作：

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>

Answer 3

您好，除了拼写错误外，您的 coords 有问题..可能是您的电源线不正确，请检查图像大小和 coords 超过图像，没有其他错误代码是完美的有你放在那里的坐标有问题。
尝试以下坐标：

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

即使遵循模板，图像映射也不起作用

Image mapping not working even following template

html

css

imagemap