客户端图像映射在 Safari 和 Chrome 中不起作用。在 Firefox 中运行良好
我有一个客户端图像映射，在 Firefox 中运行良好，但在 Safari 和 Chrome（在 Mac OS 上）中似乎不起作用。我不知道为什么会发生这种情况，因为我很确定我的语法正确，并且几乎所有浏览器都支持客户端图像映射。难道我用的是PNG吗？这是代码......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>My Image Map Page</title>
<style type="text/css">
body
{
background-image:url('images/stripe-background.jpg');
background-position:center;
background-attachment:fixed;
}
</style>
</head>
<body>
<center><img src="images/homepage-image-transparent.png" usemap="#homepagemap" ismap /></center>
<map id="homepagemap" name="homepagemap">
<area shape="rect" coords="633,531,917,736" href="page1.html" alt="Page 1" />
<area shape="rect" coords="321,531,606,736" href="page2.html" alt="Page 2" />
<area shape="rect" coords="10,531,296,736" href="page3.html" alt="Page 3" />
<area shape="rect" coords="732,478,849,505" href="page4.html" alt="Page 4" />
</map>
</body>
</html>
我想我一定错过了一些东西。感谢您的帮助。
I have a client-side image map that works fine in Firefox but does not seem to work in Safari and Chrome (on Mac OS). I am at a loss for why this is happening as I am pretty sure I have the syntax right and client-side image maps are supported by almost all browsers. Could it be that I am using a PNG? Here is the code ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>My Image Map Page</title>
<style type="text/css">
body
{
background-image:url('images/stripe-background.jpg');
background-position:center;
background-attachment:fixed;
}
</style>
</head>
<body>
<center><img src="images/homepage-image-transparent.png" usemap="#homepagemap" ismap /></center>
<map id="homepagemap" name="homepagemap">
<area shape="rect" coords="633,531,917,736" href="page1.html" alt="Page 1" />
<area shape="rect" coords="321,531,606,736" href="page2.html" alt="Page 2" />
<area shape="rect" coords="10,531,296,736" href="page3.html" alt="Page 3" />
<area shape="rect" coords="732,478,849,505" href="page4.html" alt="Page 4" />
</map>
</body>
</html>
I figure I must be missing something. Thank you for any assistance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试像这样的 CSS ：
try a CSS like this:
我让它工作了，但我很困惑为什么。我注释掉了处理背景图像的 CSS 样式规则。
因为这是我第一次在网站上使用背景图片。我认为 CSS 规则中的某些内容可能导致了问题。当我注释掉 CSS 规则后，Safari 和 Chrome 中一切正常。真正令人困惑的是，我对 CSS 规则一一进行了取消注释，试图找出导致问题的原因，但一切仍然有效。即使所有这些都没有评论。所以现在我回到了原始代码并且图像映射正在工作。我讨厌这样的解决方案：有些东西有效，但你不知道为什么以前不起作用。
无论如何..感谢您的帮助。
I got it to work, but I am baffled as to why. I commented out the CSS style rules dealing with the background image.
Since this was the first time I had used a background image for a website. I figured perhaps something in the CSS rules was causing a problem. Once I commented out the CSS rules everything worked fine in Safari and Chrome. The really confusing thing is I UN-commented the CSS rules one by one trying to figure out which one was causing the issue and everything still worked. Even with all of them UN-commented. So now I am am back to the original code and the image map are working. I hate solutions like these where something works and you have no idea why it didn't before.
In any case .. thanks for the help.