gpt4 book ai didi

html - 图像映射始终不起作用

转载 作者:行者123 更新时间:2023-11-28 15:06:58 25 4
gpt4 key购买 nike

图像映射适用于除此文档以外的其他文档。有没有错误?或者有什么原因 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>

最佳答案

首先<area>坐标与其形状不对应。对于 shape="rect"必须只有 4 个坐标,参见 MDN .

另一个问题是区域坐标似乎超出了图像的大小。在您的示例中,图像大小为 368x522。但即使是来自坐标属性 (X=523, Y=194) 的第一对坐标 (X,Y) 也已经在图片之外。所以看起来这张 map 与你的形象不符。尝试生成新 map 。

关于html - 图像映射始终不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49195158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com