Question

我有一张带有imagemap的图片。 imagemap将图像分成4个扇区（顶部，右侧，底部，左侧）。每次单击扇区（图像映射区域）时，图像都会旋转，直到该扇区位于顶部。我创建了一个小例子来展示我是如何做到的： http://jsfiddle.net/44YhF/

或者作为完整的HTML-Document：

<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jQueryRotate.js" type="text/javascript"></script>
<!-- QueryRotate is from: https://jqueryrotate.googlecode.com/files/jQueryRotate.js -->
<script type="text/javascript">
rotated=0;
aktuell=0;
isRotating=false;
jQuery(document).ready(function() {

$("#map area").click(function(event) {
console.log("click");
    event.preventDefault(); //bringt auch nichts
    if(!isRotating||true) {  //true hier raus nehmen damit die einzelnen Abschnitte nur klickbar sind wenn gerade keine Rotation läuft

        isRotating=true;
        pos=0;
        if(aktuell<$(this).attr("pos")) {
            pos=$(this).attr("pos");
        } else {
            pos=parseInt($(this).attr("pos"))+4;
        }
        rotatedif=360-(Math.abs(aktuell-pos)*90);
        rotate=rotated+rotatedif;

        aktuell=$(this).attr("pos");

        $("#cycle").rotate({animateTo:rotate, duration:(10-(Math.abs(aktuell-pos)))*300, callback: setRotatingOff});

        rotated=rotate;

    }
});


function setRotatingOff() {
    isRotating=false;
}

});
</script>
</head>
<body>
<img src="http://uploads6.wikipaintings.org/images/m-c-escher/circle-limit-iii.jpg!Blog.jpg" id="cycle" border="0" usemap="#map">
<map id="map" name="map">
<area shape="poly" coords="82,73,250,248,429,91," href="#" alt="" title=""   pos="0"/>
<area shape="poly" coords="421,85,250,246,417,419," href="#" alt="" title=""   pos="1"/>
<area shape="poly" coords="249,247,412,418,75,414," href="#" alt="" title=""   pos="2"/>
<area shape="poly" coords="248,247,74,411,82,76," href="#" alt="" title=""   pos="3"/>
</map>
</body>
</html>

适用于Chrome，Firefox，IE9 / 10。但在IE8中，图像仅在您第一次单击某个区域时旋转。第一次单击后，单击某个区域时不会再触发clickevents。

我该怎么做才能让它在IE8中运行？

Answer 1

在这种情况下，我可以使用一个小技巧：我在原始图像上使用透明图像，并在透明图像上使用地图。所以我可以在不旋转图像图的情况下旋转原始图像。

Answer 2

IE8不支持标准CSS transform:rotate;它使用专有的activeX filter方法代替。 jQuery通过为您提供一种标准的调用方法来隐藏这一点，但在幕后它的工作方式与更现代的浏览器截然不同。

问题在于，已知这些filter样式存在许多缺点和怪癖，这意味着它们并不总能很好地工作，尤其是在与其他浏览器功能结合使用时。

我从未尝试过将它与图像地图一起使用，但如果这些功能能够在一起正常工作，我会非常惊讶。

总有可能其他人可能会让我感到惊讶并找到解决方案，但我的感觉是你只需要接受在IE8中无法做到这一点。

您最好的选择可能是采取完全不同的方法。重写整个代码，使用Raphael库等方法绘制图像并为其设置动画。

该库使用浏览器的图形系统（IE8中的VML，新浏览器中的SVG），并且能够以更加跨浏览器兼容的方式显示图像，旋转图像并提供可点击区域。（它还具有不必使用图像映射的优点，这是一种有点过时的技术）

这会给你一个解决方案，但它确实意味着从头开始重写。我很欣赏你可能不想听的东西。

使用imagemap的HTML5图像旋转在IE 8中不起作用。为什么？

2 个答案: