1. Home
  2. Computing & Technology
  3. JavaScript

Rotating Object

3. Identify Object

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Introduction The Script

With the Javascript installed into your page all that remains to be done is to identify the object that is to be rotated.

To do this you first add the HTML to your page that adds the object that you want to rotate into your web page. It doesn't matter where in the page you put it because it isn't going to stay there anyway. I prefer to put such code at the very bottom of the page.

If the code isn't already contained within a paragraph or div then the next step is to surround it within <div> </div&> tags so that we can add some attributes that will apply to the entire object.

You will want to apply at least one stylesheet attribute to the div visibility:hidden to hide the object in browsers where Javascript is disabled. If the contents of your div don't define how wide the div is to be then you will also need to define a width:60px (or whatever your actual object width should be). If the div just contains an image then the image defines its own width so the width attribute in the stylesheet isn't needed.

The final step is to identify this div as the one to be rotated. We do this simply by adding id="rotate" to the div tag.

Here is an example of what the code added to your page might look like:

<div id="rotate" style="visibility:hidden">
<img src="image.gif" height="60" width="60" border="0" />
</div>
Introduction | The Script | Identify Object
Explore JavaScript
About.com Special Features

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Easy ways to connect two computers for networking purposes. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.