How to rotate the image

Discussion in 'Javascript' started by santel_helvis@sify.com, Dec 28, 2005.

  1. Guest

    Hi All,

    Could anyone tell me how to rotate the image in javascript. Which
    concepts I should concentrate to rotate the image
    , Dec 28, 2005
    #1
    1. Advertising

  2. Guest

    , Dec 28, 2005
    #2
    1. Advertising

  3. Guest

    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.
    , Dec 28, 2005
    #3
  4. 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,
    Joaquin Cuenca Abela, Dec 28, 2005
    #4
  5. wrote:

    > 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, Dec 28, 2005
    #5
  6. 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
    Thomas 'PointedEars' Lahn, Dec 28, 2005
    #6
  7. Guest

    Thomas 'PointedEars' Lahn wrote:
    > wrote:
    >
    > > 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?
    , Dec 28, 2005
    #7
  8. Guest

    Thomas 'PointedEars' Lahn wrote:
    > 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/javascript-image-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.
    , Dec 28, 2005
    #8
  9. Guest

    wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > > 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/javascript-image-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.
    , Dec 29, 2005
    #9
  10. 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
    Thomas 'PointedEars' Lahn, Dec 29, 2005
    #10
  11. Guest

    Thomas 'PointedEars' Lahn wrote:
    > 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.
    , Dec 30, 2005
    #11
  12. wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> 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
    Thomas 'PointedEars' Lahn, Dec 30, 2005
    #12
  13. Guest

    Thomas 'PointedEars' Lahn wrote:
    > 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.
    , Dec 30, 2005
    #13
  14. Bisto Boy Guest

    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.src
    spin.style.top=5000
    spin.style.position="absolute"
    }
    setInterval("whirl()",32)
    clear.outerHTML=""

    }

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

    ============================================================================
    <> wrote in message
    news:...

    wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > > 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/javascript-image-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.
    Bisto Boy, Dec 31, 2005
    #14
  15. 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
    Thomas 'PointedEars' Lahn, Dec 31, 2005
    #15
  16. Bisto Boy Guest

    "Thomas 'PointedEars' Lahn" <> wrote in message
    news:...
    > 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
    Bisto Boy, Dec 31, 2005
    #16
  17. Guest

    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 :).
    , Dec 31, 2005
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Showjumper

    How to rotate image upon upload?

    Showjumper, Feb 13, 2004, in forum: ASP .Net
    Replies:
    7
    Views:
    625
    Showjumper
    Feb 16, 2004
  2. =?Utf-8?B?QUNhdW50ZXI=?=

    Rotate ASP:Image 45 Degrees

    =?Utf-8?B?QUNhdW50ZXI=?=, Mar 1, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    5,473
    Steve C. Orr [MVP, MCSD]
    Mar 2, 2005
  3. byrd48

    Photo Rotate Image Cached

    byrd48, Oct 30, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    486
    Eliyahu Goldin
    Oct 31, 2005
  4. RC
    Replies:
    1
    Views:
    879
    Bjoern Hoehrmann
    Aug 3, 2006
  5. IanJSparks
    Replies:
    0
    Views:
    1,148
    IanJSparks
    Jan 10, 2008
Loading...

Share This Page