0

在以下脚本中，area标签定义为图像地图中心内的可点击区域。alt标记指定区域的文本，属性zoom控制放大级别为 50% 缩小原始图像：

<style type="text/css">
    #myimg {zoom:50%; -moz-transform:scale(50%); -webkit-transform:scale(50%);}
</style>

<img src="http://www.content.onemexico.net/rosa.jpg" id="myimg" width="640" height="640" usemap="#themap">
<map name="themap">
    <area shape="rect" coords="240,240,400,400" alt="RosesByAlt" title="RosesByTitle" href="#">
</map>

除 Internet Explorer (IE-9) 之外的所有主要浏览器中都会显示可点击区域的描述文本。

我尝试了title属性而不是alt，但仍然没有出现文本。

请任何人都可以帮助使用 Internet Explorer 使用缩放属性使描述文本出现在可点击区域中。

4

1 回答 1

0

IE9 使用标准的 CSStransform属性。它需要一个前缀，但它确实支持它。因此，如果您只是想支持 IE9，则根本不需要zoom。你应该能够做到这一点：

#myimg {
    -ms-transform:scale(0.5);
    -o-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

如果您需要支持 IE8 或更早版本，那么您将需要zoom或 类似的东西，但要注意它zoom与scale;不同。表面上它可能有一些相似之处，但它的工作原理却大不相同，如果你使用它，你会得到一些奇怪的效果。

所以我建议不要使用zoom，即使是旧的 IE 版本。最好使用 IE 的matrix过滤器或 polyfill 脚本将transform样式支持反向移植到旧的 IE 中。此处提供的答案可能会对您有所帮助

另请注意，我还添加了属性的无前缀版本：您应该始终提供所有属性的无前缀版本，即使还没有浏览器支持它，因为在将来的某个时间它们都会全部丢弃支持他们的前缀版本，此时如果您没有标准版本，您的代码将会中断。

于 2013-02-05T16:58:40.497 回答