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
[HTML]<!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>[/HTML]
