Jump to content
gongpex

how to rotate image using javascript

Recommended Posts

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:rotate.jpgcan someone help me to give the code / script?by the way what's function of "innerHTML"please help me thank you very much

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Edited by dsonesuk

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...