gongpex Posted May 26, 2011 Share Posted May 26, 2011 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 Link to comment Share on other sites More sharing options...
Ingolme Posted May 26, 2011 Share Posted May 26, 2011 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> Link to comment Share on other sites More sharing options...
jeffman Posted May 26, 2011 Share Posted May 26, 2011 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? Link to comment Share on other sites More sharing options...
gongpex Posted May 27, 2011 Author Share Posted May 27, 2011 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2011 Share Posted May 27, 2011 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> Link to comment Share on other sites More sharing options...
gongpex Posted May 28, 2011 Author Share Posted May 28, 2011 sorry before, what the function of java script:void();untill now I don't undrstand thanks Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2011 Share Posted May 28, 2011 sorry before, what the function of java script:void();untill now I don't undrstand thanksIt 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 28, 2011 Share Posted May 28, 2011 It should be "javascript" posting here always places a space between "java" and "script" when used with ":". Link to comment Share on other sites More sharing options...
justsomeguy Posted May 28, 2011 Share Posted May 28, 2011 Like so:<a href="javascript:void();" class="rotatethis"></a>Hex codes to the rescue. ("&" + "#115" + ";" replaces "s") Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.