CODEWITHSUNDEEP
htmlimageinternet-explorer-8rotation
nbar
nbar

Reputation: 6158

HTML5 image rotate with imagemap doesn't work in IE 8. Why?

I have an image with an imagemap. The imagemap split the image in 4 sectors (top, right, bottom, left). Everytime u click a sector (imagemap area) the image rotate until this sector is on top. I created a small example to show how I did it: http://jsfiddle.net/44YhF/

Or as full 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>

This works in Chrome, Firefox, IE9/10. But in IE8, the Image rotate only the first time you click an area. After the first click, no more clickevents are fired when u click an area.

What can I do to get this working in IE8?

Upvotes: 1

Views: 482

Answers (2)

nbar
nbar

Reputation: 6158

in this case I can use a little trick: I use a transparent image over the original image and use the map on the transparent image. So i can rotate the original image without rotating the imagemap.

Upvotes: 1

Spudley
Spudley

Reputation: 168755

IE8 doesn't support standard CSS transform:rotate; it uses a proprietary activeX filter method instead. jQuery hides this from you by giving you a standard method to call, but behind the scenes it works very differently from the more modern browsers.

The problem is that these filter styles are known to have numerous shortcomings and quirks, which mean that they do not always work very well, especially when used in conjunction with other browser features.

I've never tried using it with an image map, but I would be very surprised if these features worked properly together.

It's always possible that someone else may surprise me and find a solution, but my feeling is that you're just going to have to accept that this can't be done in IE8.

Your best bet may be to take a completely different approach. Rewrite your entire code to draw and animate the image using something like the Raphael library.

This library uses the browser's graphics system (VML in IE8, SVG in newer browsers), and will be able to display your image, rotate it, and provide clickable regions in a more cross-browser compatible way. (it would also have the advantage not having to use image maps, which are a somewhat out-dated technology)

This would give you a solution, but it does mean rewriting from scratch. I appreciate that may not be something you want to hear.

Upvotes: 0

Related Questions