How to rotate the image

[santel_helvis]

Hi All,

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image

[bwucke]

http://www.kurs.horsesport.pl/inne/rv.html
Just to annoy PointedEars.

[bwucke]

sa***********@sify.com napisal(a):

Hi All,

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image

Okay, okay, I was cheating. That wasn't really rotation, just flipping.
Here you go, real rotation:
http://www.kurs.horsesport.pl/inne/rv2.html
Passed both Validator and Jigsaw, but tested only in FF1.5, don't have
anything else handy. You need to click "continue running script" when
prompted, then wait some...
Adding size detection and edge clipping left as an exercise to the
reader.

Seriously: I don't think there's any simple way to do what you want to
do. Most likely you need to get a base64-encoded image, decode it to an
array of integers/floats, process them according to the rules of given
image format to get a "bitmap" array, then pass them through the
rotation equations attached, reencode them back to GIF/JPG/whatever,
reencode them to base64, transform to a data: URI then hand the URI
over to an IMG tag. All in Javascript. Good luck writing JPEG
decompressor in Javascript. And of course it won't work in MSIE because
it has 256-char limit on all URIs.
In short: impossible.

[Joaquin Cuenca Abela]

except if you use the new canvas and svg. This way it should work in
firefox (both), safari (canvas only) and Opera (svg only).

IE also has enough activex at its disposal to rotate an image.

Cheers,

[Thomas 'PointedEars' Lahn]

bw****@gmail.com wrote:

sa***********@sify.com napisal(a):

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image
Okay, okay, I was cheating. That wasn't really rotation, just flipping.
Here you go, real rotation:
http://www.kurs.horsesport.pl/inne/rv2.html
Passed both Validator and Jigsaw, but tested only in FF1.5, [...]

It takes more than a minute to be displayed by my Firefox 1.5 and locks
it afterwards.
You need to click "continue running script" when prompted, then wait
some...

Obviously the author of that HTML document does not have any clue.
PointedEars

[Thomas 'PointedEars' Lahn]

sa***********@sify.com wrote:

Could anyone tell me how to rotate the image in javascript.
You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.
Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.
PointedEars

[bwucke]

Thomas 'PointedEars' Lahn wrote:

bw****@gmail.com wrote:

sa***********@sify.com napisal(a):

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image

Okay, okay, I was cheating. That wasn't really rotation, just flipping.
Here you go, real rotation:
http://www.kurs.horsesport.pl/inne/rv2.html
Passed both Validator and Jigsaw, but tested only in FF1.5, [...]

It takes more than a minute to be displayed by my Firefox 1.5 and locks
it afterwards.

What did you expect with 10.000 DIVs acting as pixels? Get a faster
computer :P

You need to click "continue running script" when prompted, then wait
some...

Obviously the author of that HTML document does not have any clue.

The question was about rotating the image in Javascript. The script is
a correct answer, no matter how much you don't like it. Of course there
are better methods to rotate an image NOT using Javascript, or using
Javascript just in a support role, doing only some parameters passing
between modules of the browser. This one here performs actual rotation
in JS and uses an ugly, slow hack to display the result.

Suggest a faster, more efficient method of rotating an image in
Javascript. Feel free to use CSS, but don't use experimental features
like Canvas, SVG or non-standard or external ActiveX, Java etc.

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA

But I just did.
Javascript is Turing-complete. That means. given required input and
output techniques, plus enough resources you can do EVERYTHING in it.
Some things are just harder than others, often because of I/O
shortcomings.
Someone talking about clue?

[cwdjrxyz]

Thomas 'PointedEars' Lahn wrote:

sa***********@sify.com wrote:

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.

Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.

Indeed IE filters will work to rotate images along with text in a
division, at least in multiples of 90 degrees. See
http://elouai.com/javascript/javascr...age-rotate.php . You can test
their example on their page or download the code. Their test image is
quite small and simple. I have not tested this method on a large, very
detailed color image. Of course you will need a recent IE browser that
handles filters for this method to work.

[cwdjrxyz]

cw******@yahoo.com wrote:

Thomas 'PointedEars' Lahn wrote:

sa***********@sify.com wrote:

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.

Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.

Indeed IE filters will work to rotate images along with text in a
division, at least in multiples of 90 degrees. See
http://elouai.com/javascript/javascr...age-rotate.php . You can test
their example on their page or download the code. Their test image is
quite small and simple. I have not tested this method on a large, very
detailed color image. Of course you will need a recent IE browser that
handles filters for this method to work.

I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
I added just enough code to clean up to html 4.01 transitional. I added
a Microsoft conditional around all of the buttons so that the controls
only show on browsers for which they are likely to work(recent IE and
close relatives such as MSN 9). I used a fair sized image of about 42
KB. The response to the buttons is rapid. In addition to rotation by
multiples of 90 degrees, a morror image also can be produced. Most of
the script is hidden in the IE built-in filters. The only script you
have to write is in connection with the targets for the various
buttons.

There is another method to rotate your images by 180 degrees, but I do
not remember the details. About 2 years ago in a discussion group, a
lady described a problem that suddenly developed so that all images
displayed upside down on her monitor. There was much discussion about
monitor adjustments, but that did not help. It turned out that the
lady's children had been playing with the computer. There is some
obscure menu somewhere in the Windows OS that allows images to be
displayed rotated by 180 degrees. Her children apparently found out
about this from other children at school, and decided to have some fun
with their mother.

[Thomas 'PointedEars' Lahn]

cw******@yahoo.com wrote:

I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
I added just enough code to clean up to html 4.01 transitional.
You should add the system identifier not to trigger Compatibility Mode.
And you can make that HTML 4.01 Strict, from what I can see and what the
W3C Validator tells me, that would be Valid, too.
I added a Microsoft conditional around all of the buttons so that the
controls only show on browsers for which they are likely to work (recent
IE and close relatives such as MSN 9).
Yes, they are not shown in my Firefox 1.5 or Opera 8.5.
I used a fair sized image of about 42 KB. The response to the buttons is
rapid. In addition to rotation by multiples of 90 degrees, a morror image
also can be produced. Most of the script is hidden in the IE built-in
filters. The only script you have to write is in connection with the
targets for the various buttons.
But it is probably not necessary and makes less sense to refer to the `div'
element. Filters can be applied directly to the `img' element. At least
that worked for me with IE 4.0 filters ever since; I do not use DirectX
filters for backwards compatibility.

Referring to the `img' element would also allow you to refrain from using
the IE-proprietary referencing and use document.images['myimg'] instead,
provided that you gave the `img' the name `myimg'.
[...] There is some obscure menu somewhere in the Windows OS that allows
images to be displayed rotated by 180 degrees. Her children apparently
found out about this from other children at school, and decided to have
some fun with their mother.

:)
PointedEars

[cwdjrxyz]

Thomas 'PointedEars' Lahn wrote:

cw******@yahoo.com wrote:

I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
I added just enough code to clean up to html 4.01 transitional.
You should add the system identifier not to trigger Compatibility Mode.
And you can make that HTML 4.01 Strict, from what I can see and what the
W3C Validator tells me, that would be Valid, too.

I was not intending to make this a serious page since I do not use
Microsoft filters and such that most other browsers can not handle. I
usually use PaintShop to modify images. However, just for fun, I have
a new page at http://www.cwdjr.info/test/rotateimages2.php . This has a
php include to serve the page as true xhtml 1.1 on browsers that can
handle the correct mime type application/xhtml+xml. Such browsers
include recent versions of Firefox, Mozilla, Netscape and Opera. For
browsers such as IE6 that can not handle this mime type, the server
rewrites the page as html 4.01 strict. Thus you will see either xhtml
1.1 or html 4.01 strict code when you view the source, depending on the
browser you are using. Both the xhtml 1.1 code and html 4.01 strict
code validate fully at the W3C html and CSS validators.

I added a Microsoft conditional around all of the buttons so that the
controls only show on browsers for which they are likely to work (recent
IE and close relatives such as MSN 9).

Yes, they are not shown in my Firefox 1.5 or Opera 8.5.

I used a fair sized image of about 42 KB. The response to the buttons is
rapid. In addition to rotation by multiples of 90 degrees, a morror image
also can be produced. Most of the script is hidden in the IE built-in
filters. The only script you have to write is in connection with the
targets for the various buttons.

But it is probably not necessary and makes less sense to refer to the `div'
element. Filters can be applied directly to the `img' element. At least
that worked for me with IE 4.0 filters ever since; I do not use DirectX
filters for backwards compatibility.

If you apply the filter element to the image, it will rotate the image
only. If you apply the filters at a paragraph or division level, both
images and text in the division or paragraph will be rotated. There is
a comment about this in the new page source code.
Referring to the `img' element would also allow you to refrain from using
the IE-proprietary referencing and use document.images['myimg'] instead,
provided that you gave the `img' the name `myimg'.

I tried using document.images['myimg'] as you suggested. I left the
Microsoft conditional comments out for this test so the non-IE browsers
would see this code. The resulting code validates fully at the W3C and
there is no problem on non-IE browsers, although they of course do not
respond when the buttons concerning the filters are pressed. Everything
is at first well when you use the IE6(actually I use the SBC/Yahoo DSL
browser of my IP which takes over IE6 when you use their DSL service.
It is supposed to be about the same as IE6 in response to code).
However, when you click any of the buttons that calls the filters, you
get an IE popup saying that there is a script error for the code on the
line that generated the button, and that it does not understand the
object. Moreover, after a few more clicks, it turns script off, you can
not view the browser home page, and get a message that the page can not
be displayed because script is off. You have to reboot for things to
return to normal. Of course I could have made an error. However it
appears that the IE6-based browser wants Microsoftese code for the
buttons. I am using the Windows XP home OS with SP2 and all other
upgrades.

The page has some extra stuff to fill it out a bit and illustrate that
valid code can be written to work on most newer browsers for media such
as audio and flash. You do not have to resort to ActiveX or embed
codes. The page degrades well on most recent browsers if script is off,
if the WMP player is not installed, or if a flash player is not
installed. For example, if you use the W3C's Amaya browser with none of
these things installed, you just get a plain page with the image of the
bird. You would never know that flash, audio, or image rotation were
included, except for the 2 optional text messages on the page
concerning them or if you view the source code.

By the way, the image used for the flash was generated with javascript
in a polar coordinate system with color being a function of radius from
zero to the edge of the circle. Since this requires quite a bit of
calculation, the generated image was captured as a jpg to avoid long
recalculation every time it is used.

I seldom use flash, so I am using a free flash program That is the
reason for the 3-bar link near the top right of the page. If you pay
the company about US$ 30, you can get this link removed.

[Thomas 'PointedEars' Lahn]

cw******@yahoo.com wrote:

Thomas 'PointedEars' Lahn wrote:

cw******@yahoo.com wrote:

> I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
> I added just enough code to clean up to html 4.01 transitional. You should add the system identifier not to trigger Compatibility Mode.
And you can make that HTML 4.01 Strict, from what I can see and what the
W3C Validator tells me, that would be Valid, too.

I was not intending to make this a serious page since I do not use
Microsoft filters and such that most other browsers can not handle. I
usually use PaintShop to modify images. However, just for fun, I have
a new page at http://www.cwdjr.info/test/rotateimages2.php . This has a
php include to serve the page as true xhtml 1.1 on browsers that can
handle the correct mime type application/xhtml+xml. Such browsers
include recent versions of Firefox, Mozilla, Netscape and Opera. For
browsers such as IE6 that can not handle this mime type, the server
rewrites the page as html 4.01 strict. [...]

Read my sig ;-) However, it would be nice of you if you showed how you did
that (maybe you post a .phps URL?). Serving "HTML compatible" XHTML 1.0 as
text/html is one thing that is quite easy, rewriting XHTML 1.1 to HTML 4.01
Strict is another.

> I added a Microsoft conditional around all of the buttons so that the
> controls only show on browsers for which they are likely to work
> (recent IE and close relatives such as MSN 9).

Yes, they are not shown in my Firefox 1.5 or Opera 8.5.

> I used a fair sized image of about 42 KB. The response to the buttons
> is rapid. In addition to rotation by multiples of 90 degrees, a morror
> image also can be produced. Most of the script is hidden in the IE
> built-in filters. The only script you have to write is in connection
> with the targets for the various buttons.

But it is probably not necessary and makes less sense to refer to the
`div' ^^^^^^^^
Hrmpf, it is better not to use Google Groups for posting.
element. Filters can be applied directly to the `img' element. At least
that worked for me with IE 4.0 filters ever since; I do not use DirectX
filters for backwards compatibility.

If you apply the filter element to the image, it will rotate the image
only. If you apply the filters at a paragraph or division level, both
images and text in the division or paragraph will be rotated. There is
a comment about this in the new page source code.

Of course, that is why I said that. When I rotate an image, I would not
want its description to rotate with it so that I have to bend my neck to
read. But that's me :)

Referring to the `img' element would also allow you to refrain from using
the IE-proprietary referencing and use document.images['myimg'] instead,
provided that you gave the `img' the name `myimg'.

I tried using document.images['myimg'] as you suggested. [...] Everything
is at first well when you use the IE6(actually I use the SBC/Yahoo DSL
browser of my IP which takes over IE6 when you use their DSL service.
It is supposed to be about the same as IE6 in response to code).
However, when you click any of the buttons that calls the filters, you
get an IE popup saying that there is a script error for the code on the
line that generated the button, and that it does not understand the
object.

It may be necessary that you use the `name' attribute instead of the `id'
attribute for IE, hence my saying to give the `img' _element_ (not: tag)
that name (by and in its start tag). I would be very surprised if it still
did not work then since that referencing is part of DOM Level 0, supported
since IE 3.0.
Moreover, after a few more clicks, it turns script off, you can
not view the browser home page, and get a message that the page
can not be displayed because script is off.
Maybe there is a checkbox in the error message dialog that allows
to disable scripting at all for this "erroneous" document. I
remember to have seen such before but I do not remember where.
You have to reboot for things to return to normal. [...]
No, probably you have not. Just re-enable Active Scripting in the
Options and reload without using the cache (Ctrl+F5 IIRC).
The page has some extra stuff to fill it out a bit and illustrate that
valid code can be written to work on most newer browsers for media such
as audio and flash. You do not have to resort to ActiveX or embed
codes. The page degrades well on most recent browsers if script is off,
if the WMP player is not installed, or if a flash player is not
installed. For example, if you use the W3C's Amaya browser with none of
these things installed, you just get a plain page with the image of the
bird. You would never know that flash, audio, or image rotation were
included, except for the 2 optional text messages on the page
concerning them or if you view the source code.

True, and well done for that part. However, I do have the mplayerplug-in
3.17 installed that is able and configured to handle .wax, but see/hear
no player object in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8)
Gecko/20051224 Debian/1.5.dfsg-3 Firefox/1.5 Mnenhy/0.7.3.0. (The Flash
movie is properly displayed through the Shockwave Flash 7.0 r61 plugin.)
This is probably because of type="application/x-mplayer2" that should be
type="audio/x-ms-wax".
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[cwdjrxyz]

Thomas 'PointedEars' Lahn wrote:

cw******@yahoo.com wrote:

Thomas 'PointedEars' Lahn wrote:

Read my sig ;-) However, it would be nice of you if you showed how you did
that (maybe you post a .phps URL?). Serving "HTML compatible" XHTML 1.0 as
text/html is one thing that is quite easy, rewriting XHTML 1.1 to HTML 4.01
Strict is another.
You will find the php I use in my media link at
http://www.cwdjr.info/media/playersRoot.php . The interesting thing
about writing code to be served as xhtml 1.1 with the mime type
application/xhtml+xml is that it makes you write much better code. The
Mozilla family and Opera browsers that can handle this mime type then
parse your code as xml. Just a tiny xml error such as something not
closed often just gives you an xml error message from the browser
rather than a view of the page. Other times you just get a blank
screen.
It may be necessary that you use the `name' attribute instead of the `id'
attribute for IE, hence my saying to give the `img' _element_ (not: tag)
that name (by and in its start tag). I would be very surprised if it still
did not work then since that referencing is part of DOM Level 0, supported
since IE 3.0.
I might try using name instead of id if I have time. If I remember
correctly, name may often throw a validation error in xhtml 1.1.
However, since the page for IE is served as html 4.01 strict, you might
get away with name instead of id. For the most part, name seems to be
becoming phased out for newer versions of xhtml.
True, and well done for that part. However, I do have the mplayerplug-in
3.17 installed that is able and configured to handle .wax, but see/hear
no player object in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8)
Gecko/20051224 Debian/1.5.dfsg-3 Firefox/1.5 Mnenhy/0.7.3.0. (The Flash
movie is properly displayed through the Shockwave Flash 7.0 r61 plugin.)
This is probably because of type="application/x-mplayer2" that should be
type="audio/x-ms-wax".

I use the official Microsoft WMP 10, and used the 9 and 8 earlier. If I
remember correctly, the 10 is only available for XP. One thing is for
certain. The media wars are now more of a mess than the browser wars
ever were. You can be certain that, no matter how you write media code,
there will be some plugins out there that have bugs and will not play
it. Even if you have perfectly good plugins, there still may be
problems. Firefox has had a lot of problems with media plugins. I can
remember that after one Firefox upgrade, my flash stopped working on
Firefox and some other browsers. It turned out that Firefox had 3
plugins for QT installed- two had not been uninstalled on previous
upgrades. Removing the older two QT plugins solved the problem, and
flash support returned to all of the browsers. But before I found the
solution I wasted much time reinstalling Firefox and other browsers,
flash, etc. On the media page url I gave, you will find code for the
Real Player and SMIL. It sometimes helps to use 2 or more audio or
video formats on a page if you wish for as many to use the media as
possible.

[Thomas 'PointedEars' Lahn]

cw******@yahoo.com wrote:

Thomas 'PointedEars' Lahn wrote:

cw******@yahoo.com wrote:

> Thomas 'PointedEars' Lahn wrote:

Read my sig ;-) However, it would be nice of you if you showed how you
did

^^^^^^
Hrmpf. Can't you watch for this?
that (maybe you post a .phps URL?). Serving "HTML compatible" XHTML 1.0
as text/html is one thing that is quite easy, rewriting XHTML 1.1 to HTML
4.01 Strict is another.

You will find the php I use in my media link at
http://www.cwdjr.info/media/playersRoot.php .

Hm, I do not think this will suffice. I can think of several Validation
problems if you just remove the `/' from start tags.
The interesting thing about writing code to be served as xhtml 1.1 with
the mime type application/xhtml+xml is that it makes you write much better
code.
Well, no, it does not. Validation is a must anyway.
The Mozilla family and Opera browsers that can handle this mime type
then parse your code as xml. Just a tiny xml error such as something not
closed often just gives you an xml error message from the browser
rather than a view of the page. Other times you just get a blank
screen.
Yes, but XHTML 1.1 is really overkill when the widest distributed browser
does not even support XHTML 1.0, and the markup does not require it. XHTML
1.0 suffices if you want to take advantage of the well-formedness of XML
applications. But since you would have to maintain two versions either
way[1] (even if automated code rewriting helps), I rather stick to HTML 4.01
unless there is a feature that requires an XHTML DTD, such as MathML.

[1] <URL:http://www.hixie.ch/advocacy/xhtml>

It may be necessary that you use the `name' attribute instead of the `id'
attribute for IE, hence my saying to give the `img' _element_ (not: tag)
that name (by and in its start tag). I would be very surprised if it
still did not work then since that referencing is part of DOM Level 0,
supported since IE 3.0.

I might try using name instead of id if I have time. If I remember
correctly, name may often throw a validation error in xhtml 1.1.

Correct, that is another reason why you should not use XHTML 1.1.

XHTML has its advantages over HTML, but it also has some disadvantages
to the latter; do not fall blindly for the XHTML hype.

<URL:http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_thread/thread/635c04af4300224b/a4b644f8fc73570e#a4b644f8fc73570e>
<URL:http://hsivonen.iki.fi/xhtml-the-point/>
However, since the page for IE is served as html 4.01 strict, you might
get away with name instead of id.
Yes, the `name' attribute for the `img' element is defined in HTML 4.01
Strict.
For the most part, name seems to be becoming phased out for newer versions
of xhtml.

It is in XHTML 1.0 Transitional for `img' elements. It is no longer in
XHTML 1.0 Strict for `img' elements, but it is for form control elements.

True, and well done for that part. However, I do have the mplayerplug-in
3.17 installed that is able and configured to handle .wax, but see/hear
no player object in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8)
Gecko/20051224 Debian/1.5.dfsg-3 Firefox/1.5 Mnenhy/0.7.3.0. (The Flash
movie is properly displayed through the Shockwave Flash 7.0 r61 plugin.)
This is probably because of type="application/x-mplayer2" that should be
type="audio/x-ms-wax".

I use the official Microsoft WMP 10, and used the 9 and 8 earlier. If I
remember correctly, the 10 is only available for XP. One thing is for
certain. The media wars are now more of a mess than the browser wars
ever were. You can be certain that, no matter how you write media code,
there will be some plugins out there that have bugs and will not play
it.

As I said, the plugin I am using is not buggy in that regard as it works on
other sites. If you changed the value of the `type' attribute to something
reasonable (the type attribute is to identify the _media_ type, not the
application that should be used), it is likely to be played here and it is
unlikely that IE will even bother.
X-Post & F'up2 ciwam

PointedEars

[Bisto Boy]

100% JavaScript... Just select your own image and the script will rotate it.
Sub routines i.e. mouseovers, clicks can be included to stop & start the
rotation as required. Enjoy playing with it and hope it's what you are
looking for.
BistoBoy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v = "BB:OnTheFiddleFaddle"><HEAD><TITLE>Revolving image</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE>v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
</HEAD>

<BODY bgColor=#ffffff scroll=yes onload='setTimeout("startUp()",4000)'>
<IMG style="VISIBILITY: hidden" src="YOUR PICTURE HERE"> <SPAN
id=clear></SPAN>
<DIV id=picHold></DIV>
<SCRIPT language=JavaScript>
var delay=1
delay=delay*1000
nx=0;ny=0;r=0;a=0;gb=405
var position
spin=new Array()

function whirl() {
for(i=0;i<1;i++)
{
r=+0.05;s=+1;if(i>0){r=1}
angle=(i/2*Math.PI)+a
spin.style.top =ny - Math.sin(angle)*2*r
spin.style.left=nx - Math.cos(angle)*3*r
spin.rotation=(i-1)*90-(a*180/Math.PI)
spin.style.width=gb
spin.style.height=gb
}
a=a-(Math.PI/(32))
}
function startUp(){
picHold.innerHTML=""
db=document.body
nx=db.offsetWidth/5-130
ny=db.offsetHeight/5-55
position=db.all.tags("IMG")
for(i=0;i<1;i++){
picNet=document.createElement("v:image")
spin=picHold.appendChild(picNet)
spin.imagedata.src=position[i].src
spin.style.top=5000
spin.style.position="absolute"
}
setInterval("whirl()",32)
clear.outerHTML=""

}

</SCRIPT>
</BODY></HTML>

================================================== ==========================
<cw******@yahoo.com> wrote in message
news:11**********************@g49g2000cwa.googlegr oups.com...

cw******@yahoo.com wrote:

Thomas 'PointedEars' Lahn wrote:

sa***********@sify.com wrote:

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.

Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.

Indeed IE filters will work to rotate images along with text in a
division, at least in multiples of 90 degrees. See
http://elouai.com/javascript/javascr...age-rotate.php . You can test
their example on their page or download the code. Their test image is
quite small and simple. I have not tested this method on a large, very
detailed color image. Of course you will need a recent IE browser that
handles filters for this method to work.

I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
I added just enough code to clean up to html 4.01 transitional. I added
a Microsoft conditional around all of the buttons so that the controls
only show on browsers for which they are likely to work(recent IE and
close relatives such as MSN 9). I used a fair sized image of about 42
KB. The response to the buttons is rapid. In addition to rotation by
multiples of 90 degrees, a morror image also can be produced. Most of
the script is hidden in the IE built-in filters. The only script you
have to write is in connection with the targets for the various
buttons.

There is another method to rotate your images by 180 degrees, but I do
not remember the details. About 2 years ago in a discussion group, a
lady described a problem that suddenly developed so that all images
displayed upside down on her monitor. There was much discussion about
monitor adjustments, but that did not help. It turned out that the
lady's children had been playing with the computer. There is some
obscure menu somewhere in the Windows OS that allows images to be
displayed rotated by 180 degrees. Her children apparently found out
about this from other children at school, and decided to have some fun
with their mother.

[Thomas 'PointedEars' Lahn]

Bisto Boy wrote:

100% JavaScript...
That is (of course) not true.
And it is not even the HTML code that it claims to be.

<URL:http://validator.w3.org/>
[Top post]

<URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1Post>
PointedEars

[cwdjrxyz]

Bisto Boy wrote:

100% JavaScript... Just select your own image and the script will rotate it.
Sub routines i.e. mouseovers, clicks can be included to stop & start the
rotation as required. Enjoy playing with it and hope it's what you are
looking for.

I took the liberty to put your code on a web page so that everyone can
easily see what it does. See http://www.cwdjr.info/test/rotatepost.html
.. The code works only for IE6 and close relatives as it is written and
it will take a few seconds for the rotating image to show. Also the
image of the parrot I used on my page is compressed from a rectangle
with height greater than width to a square. However the image clearly
is being rotated to angles other than just multiples of 90 degrees as
you get with IE filters.

The code appears to be rather old and could stand quite a bit of clean
up to bring it up to present standards. At least one reason that ther
code works on IE only is that it uses some IE code such as .all and not
..getElementById that is required by Mozilla family browsers, for
example. However it appears that it might be possible to modify the
code to rotate an image to any desired angle, and stop there if you
wish, at least for IE browsers. Modification to include other browsers
might require much more work.

Anyway, your post is aimed at the subject of the thread which had
drifted to other subjects such as the merits of various types of code.
I have no need for the code and thus will not spend time to try to
update it. PaintShop does all of the rotation I need. However I can see
situations when it might be desirable to be able to rotate images as
well as drag and drop them - perhaps for a program to allow a lady to
try out rearrangement of heavy furniture in a room without having to
move many pieces of furniture many times :-).

[Bisto Boy]

"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote in message
news:15****************@PointedEars.de...

Bisto Boy wrote:

100% JavaScript...

That is (of course) not true.
And it is not even the HTML code that it claims to be.

<URL:http://validator.w3.org/>

[Top post]

<URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1Post>
PointedEars

Fine, fine... but the image rotates and gives the original poster enough to
be getting on with to satisfy his question "Could anyone tell me how to
rotate the image in javascript. Which concepts I should concentrate to
rotate the image". Point taken though, Thomas, thanks.
BB