how to rotate image using javascript

[gongpex]

Hello anyone I just tried to create rotate image hover using CSS3 andit's working in firefox;safari;chrome, but when I use opera_1010 it's not workso how to create image rollover (hover) that can rotate image using javascript?as imagination:can someone help me to give the code / script?by the way what's function of "innerHTML"please help me thank you very much

[Ingolme]

You can't rotate anything in Javascript. Though CSS3 has new properties that allow rotation of elements. I'm not sure how well supported they are yet.innerHTML just returns a string containing all the HTML within an element. It allows you to set it as well.The innerHTML of the following paragraph element:

<p>Some code <b>More code</b></p>

would be

Some code <b>More code</b>

[jeffman]

As long as the functionality of your page does not depend on an image being rotated, there might be no reason NOT to use the CSS3 property.If you're not animating this thing, is there a reason not to rotate the image in your image editor?

[gongpex]

If using jquery, can we rotate the image?Because I heard that macintosh not accept flash animation, I think that's reason to search another script,and CSS3 not work well for example in opera version 1010 , image can't rotateThanks for answer

[dsonesuk]

Can't you use a animated gif? the image does not use more than 256 colours, so that should not be a problem. Using jquery/javascript you would have to reference the image file in the src of img element, for each individual image showing different rotation stages, which would show as continuously loading in status bar as it loads each file in sequence. The other option would to have all images within the page, but use display:none; and display: block to show only the image for specific rotation stage, while hiding the rest.You would probably use setTimeout() to loop a function every so many milliseconds to show the specific image rotation stage in sequencesetTimeout("rotatethis()", 80)EDIT: ARE we talking about a single rotation of 45 degrees as your image above, OR complete 360 rotation?IF just 45 degree, you just create a sprite image combining first stage and second stage (as your image above), then use :hover and then background-position to show second stage image only when hovered over.

<style type="text/css">a.rotatethis{display:block; width:240px; height:237px; background: url(rotate.jpg) no-repeat 18px 0; border:2px solid red;}a.rotatethis:hover{ background: url(rotate.jpg) no-repeat -220px 0;}</style>

<a href="java script:void();" class="rotatethis"></a>

[gongpex]

sorry before, what the function of java script:void();untill now I don't undrstand thanks

[Ingolme]

sorry before, what the function of java script:void();untill now I don't undrstand thanks

It does literally nothing. It's used to prevent the link from having any effect on the page. You can get the same effect by adding "return false" to the onclick attribute.

[dsonesuk]

It should be "javascript" posting here always places a space between "java" and "script" when used with ":".

[justsomeguy]

Like so:<a href="javascript:void();" class="rotatethis"></a>Hex codes to the rescue. ("&" + "#115" + ";" replaces "s")