Question

我有一个客户端图像映射，可以在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>

我想我必须遗漏一些东西。感谢您的帮助。

Answer 1

尝试 CSS ，如下所示：

background-image:url(images/stripe-background.jpg);

Answer 2

我得到了它的工作，但我很困惑为什么。我评论了处理背景图像的CSS样式规则。

//background-image:url('images/stripe-background.jpg');
//background-position:center;
//background-attachment:fixed;

因为这是我第一次使用网站的背景图片。我想也许CSS规则中的某些东西引起了问题。一旦我评论出CSS规则，一切都在Safari和Chrome中运行良好。真正令人困惑的是我联合评论了CSS规则，逐一试图弄清楚哪一个引起了问题，一切仍然有效。即使所有人都在联合国发表评论。所以现在我回到原始代码，图像映射正在运行。我讨厌像这样的解决方案，其中某些东西有效，你不知道为什么它之前没有。

无论如何......感谢您的帮助。

客户端图像映射在Safari和Chrome中无法使用。在Firefox中正常工作

2 个答案: