1

イメージマップ付きの画像があります。イメージマップは、画像を 4 つのセクター (上、右、下、左) に分割します。セクター (イメージマップ領域) をクリックするたびに、このセクターが一番上になるまで画像が回転します。私はそれをどのように行ったかを示すために小さな例を作成しました: http://jsfiddle.net/44YhF/

または完全な HTML ドキュメントとして:

<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 では、領域を最初にクリックしたときにのみ画像が回転します。最初のクリックの後、エリアをクリックしてもクリックイベントは発生しません。

これを IE8 で動作させるにはどうすればよいですか?

4

2 に答える 2

1

この場合、ちょっとしたトリックを使用できます。元の画像の上に透明な画像を使用し、透明な画像でマップを使用します。したがって、イメージマップを回転させずに元の画像を回転できます。

于 2013-08-09T08:22:30.183 に答える
0

IE8 は標準の CSS をサポートしていませんtransform:rotate。代わりに独自の ActiveXfilterメソッドを使用します。jQuery は、呼び出すための標準的なメソッドを提供することでこれを隠しますが、舞台裏では最新のブラウザーとは大きく異なる動作をします。

問題は、これらのfilterスタイルには多くの欠点や癖があることが知られていることです。つまり、特に他のブラウザー機能と組み合わせて使用​​すると、必ずしもうまく機能するとは限りません。

イメージ マップで使用したことはありませんが、これらの機能が適切に連携すると非常に驚かれることでしょう。

他の誰かが私を驚かせて解決策を見つける可能性は常にありますが、これは IE8 では実行できないことを受け入れる必要があると思います。

あなたの最善の策は、まったく異なるアプローチを取ることかもしれません. コード全体を書き直して、Raphaelライブラリなどを使用して画像を描画およびアニメーション化します。

このライブラリは、ブラウザーのグラフィック システム (IE8 では VML、新しいブラウザーでは SVG) を使用し、画像を表示して回転させ、ブラウザー間の互換性を高める方法でクリック可能な領域を提供することができます。（やや時代遅れの技術であるイメージマップを使用する必要がないという利点もあります）

これで解決策が得られますが、最初から書き直すことになります。聞きたいことではないかもしれませんが、よろしくお願いします。

于 2013-08-08T13:00:04.823 に答える