0

无论如何要使图像映射符合 W3C XHTML 1.0 Strict 标准吗？

我正在处理这个页面，当我点击我的 W3C Validator 徽章时，我收到了一个验证错误。 

There is no attribute "type", <area type="rect" coords="21,19,155,76" ...

是否有任何符合 XHTML 1.0 Strict 标准的标签替换了图像映射 <map> 和 <area> 标签？

我确实去了 w3c 并查看了他们的规范，我唯一能找到的是带有嵌套 <li> 的 <nl> 标记，但我尝试了它们，但它们在我尝试的任何浏览器中都不起作用。

4

6 回答 6

5

验证失败，因为属性的正确名称是shape，即该行应该是

<area shape="rect" coords="21,19,155,76" ...

但是，rect无论如何都是默认值，因此您可以删除该type属性。

来源：XHTML 1.0 Trans DTD，搜索ELEMENT area

于 2009-01-19T15:02:41.950 回答
3

图像地图的使用不像以前那样多，但是一些网站（Facebook、MySpace、Flickr）使用它们来标记照片。这是一个链接，向您展示实现类似结果的方法。

CSS 图像映射

CSS 图像映射，Redux

列表分开：图像地图之夜

于 2009-01-19T15:00:26.260 回答
0

改用a链接元素并使用 CSS 来定位它们。类似（虽然不完全一样）这样的东西：

<div id="myheader">
    <a href="#" class="link1"><span>Link text for people without CSS</span></a>
</div>

和

#myheader {position:relative}
#myheader a {position:absolute;display:block}
#myheader a.link1 {top:5px;left:10px;width:20px;height:50px}
#myheader a span {display:none}
于 2009-01-19T15:04:33.350 回答
0

成功！

多亏了Ozone Asylum的某个人，我找到了答案，他将我带到了一篇关于css sprites的 List Apart 文章。你可以做同样的事情，只是没有那么困难。（但它可以是 XHTML 兼容的！）

我实际上在这里做了一个，只需单击红色大箭头即可查看示例...

公平地说，虽然我承认，它看起来有点俗气......客户选择的照片，不是我的！

于 2009-02-07T19:34:01.047 回答
0

我做了一些研究，似乎浏览器还不支持 XHTML Strict 兼容的图像映射。

我的最后一个绊脚石是大多数浏览器都需要 usemap 属性中的“#”才能工作，这现在是无效的。

您可以通过检测浏览器是否接受内容类型 application/xhtml+xml 并仅使用该类型进行响应来绕过对 name 属性的需求。（然后它修复了 Chrome，我认为 Firefox 不会破坏 IE）。

我使用了几个 css 解决方案并最终使用了 Oli 的建议。简单而且有效。

于 2010-06-20T07:20:51.393 回答
-1

老实说，如果您正在制作图像映射，那么您可能使用了不正确的 XHTML 语义。您应该真正发布您正在尝试做的事情，看看它们是否是可行的替代方案。

于 2009-01-19T15:12:57.530 回答