Rotate an Image 90° or 180° ?

[Traveler]

I'm looking around for any script that will take a .jpg or .gif image and turn it
(rotate it) 90 or 180° by single-clicking on the image.

Does such code exist that can be included in the <img src. . . > tag itself
Like <img src="myimage.jpg" onClick . . . > ?

[jscheuer1]

Not really. This:

http://www.walterzorn.com/rotate_img/rotate_img.htm

perhaps comes closest. Be sure to read the warnings.

Something like that might be able to be worked out in Flash. But it wouldn't be an onclick event of the img tag, it could probably be an onclick event of the Flash object. But, I'm not 100% sure this can be done in Flash either, just that it might be possible.

On the other hand, if you already had the 90 and 180 degree views as separate image files, a simple image swap could be done onclick in javascript.

[djr33]

You could play with negative height/widths

[jscheuer1]

You could play with negative height/widths

Are you serious? The smiley would seem to indicate, no.

[djr33]

Hey, it works logically and in programs like photoshop. I seriously doubt it would work in browsers, though, (I haven't tried it), and certainly wouldn't be reliable. But might be fun! Now I must try it.


Edit: Conclusion: nevermind. The best you can do is get the image to not display at all using a negative width. Height seems to do nothing. How sad. I protest!!! HTML 5 SHALL INCLUDE THIS I SAY! (Don't mind me, I'll be on my way now...)

[BLiZZaRD]

You can do it in Flash, this I know. Which leads me to believe you can also do it with JS. Not sure exactly how at the moment, but perhaps I will work on something.

Hmm.. off to ponder...

[jscheuer1]

If you can do it in Flash, I would think it would because of Flash's ability to manipulate images with minimal drain on the CPU is greater than javascript's. In javascript (as far as I know), the math involved would put even the fastest processor into a catatonic state.

[BLiZZaRD]

Well, no one said it would be easy.... LOL

My meaning is that AS and JS are virtually the same. Coding in one is very similar to the other (but why I can master AS and not grasp JS is beyond me.. but I am trying to teach myself JS.. it's coming along...

Perhaps there is a little trick to it we haven't thought of yet.. I may just uncover that... Yay me

[djr33]

Despite any similarities in the languages, the properties simply differ. There's no "movie clip" object in JS, as a basic example.

However, I'm not fully convinced it isn't possible. I'd think that backwards or upside down would in fact be possible. But not odd angles (like 45 degrees)

[jscheuer1]

There is an IE only way:

style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);"

But this doesn't rotate in real time, just shows the image rotated 180 degrees (use rotation=1 for 90, 3 for 270). You can script this, but it would be an abrupt transition. Filters only work in IE 5.5 and up, this particular one may have come along later. They don't work in any other browsers.

I seem to remember now a cross browser script that put a faded 'reflection' beneath an image, not sure though, I'll have a look for it.