Jump to content

rotate image


swethak

Recommended Posts

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.