Hi
Ich habe ein Bild, dass via Image Map in klickbare Bereiche unterteilt ist. Beim Klick auf einen Bereich wird das Bild so gedreht, dass dieser Bereich oben ist. Dies funktioniert auch, ausser im IE8 (IE7 wird nicht unterstützt).
Im IE8 funktioniert der erste Klick, danach sind die einzelnen Areas der Map nicht mehr klickbar.
Ich habe das kurz nachgebaut:
http://jsfiddle.net/44YhF/
oder (Weil jsFiddle in IE8 gar nicht richtig funktioniert) als HTML Seite:
Ich Teste es mit dem IE10 und stelle dort den Browsermodus auf IE8. Es würde sogar funktionieren wenn der Browsermodus auf IE8 und der Dokumentenmodus auf IE9 gestellt ist. Aber das bringt mir glaube ich nicht viel.
Jemand eine Idee woran es liegen könnte und wie es auch im IE8 zum laufen kriege?
Ich habe ein Bild, dass via Image Map in klickbare Bereiche unterteilt ist. Beim Klick auf einen Bereich wird das Bild so gedreht, dass dieser Bereich oben ist. Dies funktioniert auch, ausser im IE8 (IE7 wird nicht unterstützt).
Im IE8 funktioniert der erste Klick, danach sind die einzelnen Areas der Map nicht mehr klickbar.
Ich habe das kurz nachgebaut:
http://jsfiddle.net/44YhF/
oder (Weil jsFiddle in IE8 gar nicht richtig funktioniert) als HTML Seite:
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>Jemand eine Idee woran es liegen könnte und wie es auch im IE8 zum laufen kriege?
