SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: rotate image

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2008
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rotate image

    Hi

    i have a code for rotating image.But it worked for only image width=30 and height=30.And we give width=100 and height=100 it will not work in Firefox.plz tell what's the problem in my code


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>javascript: Rotate Images</title>
    </head>
    <body style="background-color: white">
    <form>
    <script type="text/javascript" >
    function rr_getPageXY(r_o)
    {
    if (rr_n4)
    {
    r_o.x = r_o.img.x || 0;
    r_o.y = r_o.img.y || 0;
    }
    else
    {
    var r_p = r_o.img;
    r_o.x = r_o.y = 0;
    while (r_p)
    {
    r_o.x += parseInt(r_p.offsetLeft);
    r_o.y += parseInt(r_p.offsetTop);
    r_p = r_p.offsetParent || null;
    }
    }
    };


    function rr_getDiv(r_x)
    {
    return (
    document.all? document.all[r_x]
    : rr_n4? document.layers[r_x]
    : document.getElementById? document.getElementById(r_x)
    : null
    );
    }


    function RRObj(r_o, r_ang)
    {
    this.name = r_o;
    this.img = document.images[r_o];
    rr_getPageXY(this);
    this.w = this.img.width;
    this.h = this.img.height;
    this.angle = r_ang;
    this.htm = '';
    for (var r_i = this.h; r_i--
    {
    for (var r_j = this.w; r_j--
    {
    this.htm += '<div id="' + r_o + 'row' + r_i + 'col' + r_j + '"'+
    ' style="position:absolute;'+
    'left:' + (this.x+r_j) + 'px;'+
    'top:' + (this.y+r_i) + 'px;'+
    'width:1px;height:1px;'+
    (rr_n4? 'clip:rect(0, 1px 1px 0);">' : 'overflow:hidden;">')+
    '<div style="position:absolute;'+
    'left:' + (-r_j) + 'px;'+
    'top:' + (-r_i) + 'px;">'+
    '<img src="' + this.img.src+ '" '+
    'width="' + this.w + '" height="' + this.h + '">'+
    '<\/div><\/div>';
    }
    }
    }


    RRObj.prototype.rotateTo = function(r_ang)
    {
    this.angle = r_ang;
    var r_sin = Math.sin(r_ang = r_ang*Math.PI/180),
    r_cos = Math.cos(r_ang),
    r_cx = this.w>>1,
    r_cy = this.h>>1,
    r_o,
    r_z = 0;
    for (var r_i = this.h; r_i--
    {
    for (var r_j = this.w; r_j--
    {
    r_o = this.pxs[r_z++] || null;
    var r_x = r_j-r_cx,
    r_y = r_i-r_cy,
    r_xrot = Math.round(r_x*r_cos-r_y*r_sin+r_cx),
    r_yrot = Math.round(r_x*r_sin+r_y*r_cos+r_cy);
    if (rr_n4) r_o.moveTo(this.x+r_xrot, this.y+r_yrot);
    else if (r_o)
    {
    r_o.style.left = (this.x+r_xrot)+rr_px;
    r_o.style.top = (this.y+r_yrot)+rr_px;
    }
    }
    }
    }


    RRObj.prototype.swapImage = function(r_x)
    {
    //this.nimg.src = r_x;
    };


    function SET_ROTATABLE()
    {
    var r_a = SET_ROTATABLE.arguments, r_htm = '', r_o;
    window.rr_n4 = !!document.layers;
    window.rr_px = (rr_n4 || !!(window.opera && !(r_o = document.documentElement || document.body) && !r_o.innerHTML))? '' : 'px';
    window.rots = new Array();
    for (var r_i = r_a.length-1; r_i > 0; r_i -= 2)
    {
    r_o = rots[rots.length] = rots[r_a[r_i-1]] = new RRObj(r_a[r_i-1], r_a[r_i]);
    r_htm += r_o.htm;
    if (rr_n4) r_o.img.src = spacer;
    else r_o.img.style.visibility = 'hidden';
    }
    document.write((rr_n4? '<div style="position:absolute;"><\/div>\n' : '') + r_htm);
    for (r_i = rots.length; r_i--
    {
    (r_o = rots[r_i]).pxs = new Array(r_o.w*r_o.h);
    for (var r_z = 0, r_j = r_o.h; r_j--
    {
    for (var r_k = r_o.w; r_k--; r_z++)
    r_o.pxs[r_z] = rr_getDiv(r_o.name + 'row' + r_j + 'col' + r_k);
    }
    r_o.rotateTo(r_o.angle);
    }
    }
    </script>

    <center>
    <br />
    <table cellpadding="24">
    <tr>
    <td align="center">
    <img id="newImg" src="furniture11/logo1.jpg" width="100" height="100"/>
    </td>
    <td>
    <tt><a href="javascript:void(0)" onclick="if (window.rots) rots.newImg.rotateTo(parseInt(document.forms[0].A.value));">
    Rotate image by angle( </a></tt>
    <input name="A" type="text" size="4" value="270">
    <tt><a href="javascript:void(0)" onclick="if (window.rots) rots.newImg.rotateTo(parseInt(document.forms[0].A.value));">
    ) </a></tt>
    </td>
    </tr>
    </table>
    </center>

    <script type="text/javascript">
    <!--
    SET_ROTATABLE("newImg", 90);
    //-->
    </script>
    </form>
    </body>
    </html>

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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