swethak Posted June 27, 2008 Share Posted June 27, 2008 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.