Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    clockwise or counterclockwise image rotation

    I am making a web page where the main focus will be an abstract image that users will have the power to spin or rotate on screen. The object is to change the angle of the image to allow people to see shapes and symbols within the abstractism. Think of the page as techno inkblot testing. Users will push a left or right button, scroll a bar or type in an angle and the image will react, adjusting its angle as directed. Is there anything written that does this? If not, where, with my basic JavaScripting skills should I start?

    Muchly appreciative of any advice,
    tanx in advance!

    Brandon

  • #2
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    javascript can't do that. you could do that with a java applet, or with flash, but not with javascript.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    IE has a proprietary filter: CSS property, and among the various transform you can apply through it, rotation is one of them.

    http://www.webfx.eae.net uses it on their frontpage.

    The only standards-compliant way to do this though would be to insert whatever content you have into an SVG <foreignObject> tag and apply a rotation transformation to it, though non-SVG-enabled-Mozilla browsers would require a plugin to view it.

  • #4
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS rotate, I was suspecting that

    Thanks, to code something like that sounds out of my league. It would be nice to have it rotate smooth but I might be able to compromise with a slide show and finite amount of viewing angles. To start with at least, the point will be to launch this site, not drown in a script. Also maybe flash with action scripting would be a good way to go. I didn't see the example on the WebFX front page.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Depends on the time of year
    Posts
    478
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Saw this nifty trick at this site:

    kitbag.com

    where some nike shoe products, you could view from different angles based on where the mouse was located. Turned out they used imagemaps, and if the mouse was over a particular vicinity, the image would change to that angle, you might want to try that, doesn't look too bad.

    Here's a direct link to that example:

    http://www.kitbag.com/stores/kitbag_...6&bid=9&mid=26

    Hope it helped.

    Duniyadnd

  • #6
    New Coder
    Join Date
    Jun 2002
    Location
    uk
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jkd, whats the css proprietry filter code i could just to rotate an image? ive looked all over msdn but cant find it!

    thanks, paul

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    schmirk said
    .....I might be able to compromise with a slide show and finite amount of viewing angles.
    If you have a graphics program that can rotate the image and create a finite number of images you can use an animated rollover script.

    Demo's
    http://www.javascript-fx.com/interfaces/globe/demo.html
    http://www.javascript-fx.com/experim...ers/index.html
    http://www.javascript-fx.com/experim...ers/demo1.html
    http://www.javascript-fx.com/experim...ers/demo2.html
    http://www.javascript-fx.com/experim...ers/demo6.html

  • #9
    New Coder
    Join Date
    Jun 2002
    Location
    uk
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    beetle, thats exactly what i wanted, thanks. the only problem is it rotates the image from the left hand side. is there any way to get it to rotate from the centre? it looks silly with how it is at the moment! :(

    here is the code i have so far (if you hold down P, it will rotate the picture):

    <script>
    document.onkeydown = keyDown
    this.angle = 0

    function keyDown() {
    if (window.event.keyCode==80) {
    SetRotation() } }

    deg2rad = Math.PI * 2 / 360;

    function SetRotation() {
    this.angle += 10;
    rad = this.angle * deg2rad;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);
    mydiv.filters.item(0).M11 = costheta;
    mydiv.filters.item(0).M12 = -sintheta;
    mydiv.filters.item(0).M21 = sintheta;
    mydiv.filters.item(0).M22 = costheta; }
    </script>

    <div id="mydiv" style="width:25px; height:25px; filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"><img src="picture.gif" width="25" height="25"></div>

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I don't know. Perhaps somebody who is more of a mathmetician than I can offer a solution.

  • #11
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    good links but...

    yes, these types of link will work but I have one issue that clubs them all, even the slide show. My images, in order to be properly enjoyed have to weigh in at around 100 kb. How many copies does it take to animate? Not feasible. Even at only 8 different angles, those with low bandwidth will simply not be able to enjoy the page. However, to load one copy of this image and turn it like a steering wheel, left and right, is feasible. This spells applet or flash.

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    100kb? Goodness, that's big. What is it? What are the dimensions? Got a link? I'm sure it can be smaller...

  • #13
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    no link yet

    I havent posted any of the images yet, just feeling out where I am heading while I finish off some other work. The point will be to display photography in a high enough resolution that it can be enjoyed almost full screen or larger. The details in this display are important.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •