You are here: Home > Scripts > Javascript Image Rotate


	What's New	Doll Makers	Room Makers	Puzzle Makers	Roiworld	Stardoll	Smilies	Links

Back to Scripts

Javascript, Div (image and text) Rotate

Requires Internet Explorer 5.5 or later to work
The DIV is located below, before applying image filters the image object requires its layout to be set.
We do that by setting its height and width properties (done inside the style tag).
Having the layout defined can also be done by setting the position attribute to absolute.
Or the layout can be defined by setting the property CONTENTEDITABLE in the div.

To rotate the div (image and text) we use DXImageTransform, properties rotate and mirror.

Div text

onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mirror=0)'"

onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mirror=1)'"

onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'"

onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'"

onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'"

onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'"

onlick="mydiv.style.filter=''"

DHTML Source

<!-- This DIV is the target container for the image.  -->
  <div id="mydiv" style="height:50; width:50">
    <center>
    <img src='../images/BABY_doll.gif'><br>
    <font size=1>Div text</font>
     </center>
  </div>

<!-- Buttons to manipulate the div.  -->
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mirror=0)'">mirror=0, default image</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mirror=1)'">mirror=1, flip div</button><br>

<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'">rotation=0, no rotation</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'">rotation=1, rotate div 90 degrees</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'">rotation=2, rotate div 180 degrees</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'">rotation=3, rotate div 270 degrees</button><br>

<button onclick="mydiv.style.filter=''">Clear Filter</button><br>

References:
MSDN - Basic Image
MSDN - Rotation attribute
MSDN - Mirror attribute

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License