Rotate Image
A JavaScript Experiment to rotate images on a webpage by arbitrary angles
By Walter Zorn
|
|
|
Warning:
This is just a quickly hacked, unpromising experiment!! It is (and will alway be) strictly advised against using this library on a website!
To make an image rotatable, the script internally re-composes the image by width x height DIV elements (for example, 629 for a tiny 37px x 17px image), each containing the original image, but clipped in a manner that only the required pixel is visible.
Due to this huge number of DIVs and image copies required, dynamical client-side rotation of HTML images will always be slow and restricted to small images - although this library uses a fast matrix-multiplication algorithm. |
Download
wz_rotateimg.js ver. 0.5 pre-alpha zipped
wz_rotateimg.zip |
Inclusion into a website
If you can't refrain from trying this library: Each of the images requires a unique name, for example
<img name="newImg" src="newImg.gif" width="37" height="17">
Then insert the following lines after the last of the images into the HTML source, preferably immediately before the closing </body> tag. Example:
<script type="text/javascript" src="wz_rotateimg.js"></script>
<script type="text/javascript">
<--
SET_ROTATABLE("newImg",90,"winky",180);
//-->
</script>
As parameters separated with commas from each other, SET_ROTATABLE() requires the name of each image, followed by the desired initial rotation angle in degrees. After SET_ROTATABLE() has been invoked, the images are accessible via the rots array, by an expression as
rots.nameOfImage
or
rots['nameOfImage']
or, of course,
rots["nameOfImage"]
You can at any time envoke an image's rotateTo() method as the following examples illustrate: rots.newImg.rotateTo(270);
or
rots["winky"].rotateTo(135);
(see also clickable demo example on top of this page). As parameter, rotateTo() requires the desired rotation angle in degrees. You can retrieve the current angle of an image by it's angle property, for the above example:
rots.newImg.angle |
|
