HTML5 изображение вращается с imagemap не работает в IE 8. Почему?

У меня есть изображение с изображением. Карта изображения разбила изображение на 4 сектора (сверху, вправо, снизу, слева). Каждый раз, когда вы нажимаете сектор (область воображения), изображение вращается, пока этот сектор не будет сверху. я создал небольшой пример, чтобы показать, как я это сделал: HTML5 изображение вращается с imagemap не работает в IE 8. Почему?

Или как полный 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?

источник

2013-08-08 nbar

В этом случае я могу использовать небольшой трюк: Я использую прозрачное изображение поверх исходного изображения и использую карту на прозрачном изображении. Поэтому я могу поворачивать исходное изображение без поворота изображения.

источник

2013-08-09 08:22:30 nbar

Хорошо сделано для поиска решения; Я дал вам +1, потому что это хороший прагматичный подход к решению проблемы без необходимости делать основной переписываемый текст, который я предлагал. Я все еще думаю, что мой ответ будет лучше, если вы начнете с нуля, но если ваше решение будет работать для вас, то это путь. Отлично сработано. Вы должны щелкнуть значок «галочка», чтобы принять ответ, чтобы другие могли видеть, что вопрос был разрешен. – Spudley

IE8 не поддерживает стандарт CSS transform:rotate; вместо этого он использует собственный метод activeX filter. jQuery скрывает это от вас, предоставляя вам стандартный метод вызова, но за кулисами он работает совсем не так, как в современных браузерах.

Проблема заключается в том, что эти стили filter, как известно, имеют множество недостатков и причуд, что означает, что они не всегда работают очень хорошо, особенно при использовании в сочетании с другими функциями браузера.

Я никогда не пробовал использовать его с картой изображений, но я был бы очень удивлен, если бы эти функции работали правильно вместе.

Всегда возможно, что кто-то еще может удивить меня и найти решение, но я чувствую, что вам просто придется признать, что это невозможно сделать в IE8.

Ваш лучший выбор может заключаться в совершенно другом подходе. Перепишите весь код, чтобы рисовать и анимировать изображение, используя что-то вроде библиотеки Raphael.

Эта библиотека использует графическую систему браузера (VML в IE8, SVG в новых браузерах) и будет иметь возможность отображать ваше изображение, поворачивать его и предоставлять интерактивные области, совместимые с другими браузерами. (также было бы полезно не использовать карты изображений, которые являются несколько устаревшей технологией)

Это даст вам решение, но это означает переписывание с нуля. Я ценю, что это может быть не то, что вы хотите услышать.

источник

2013-08-08 13:00:04 Spudley

Я нашел способ и разместил андерсера. Не могу ответить, но мне нужно подождать 8 часов. Решение состоит в том, чтобы использовать прозрачное изображение с картой imagemap и положить это поверх исходного изображения. затем поворачивайте только исходное изображение, так что карта изображений никогда не вращается. – nbar

@ user2481955 - да, это будет работать в вашем случае, так как ваша карта изображения кажется симметричной. Это не сработало бы в большинстве подобных случаев. И я по-прежнему рекомендую решение SVG/VML как лучшее решение технически, чем использование карт изображений. – Spudley

HTML5 изображение вращается с imagemap не работает в IE 8. Почему?

ответ

Смежные вопросы