Rotating an image on a web page with Javascript is relatively easy. You need to be familiar with HTML, so you know what you're looking at when you edit the web page code to rotate the image, but if you use a web page editing tool capable of auto-generating Javascript for rollover images, you don't need to write any Javascript yourself to make this work.
Instructions
1. Open your web page editing software and create a new page or pull up the page you want to add the rotating image to and insert the image. It is recommended you use a web page editing tool like Adobe Dreamweaver that can create some of the Javascript for you.
2. Open your graphics software if you don't already have a series of images showing the rotation of the image.
3. Use your graphics program to make copies of the original image, each rotated slightly more than the previous one, until you are back to the original image. If you're using a 90 degree rotation each time, you would end up with 4 images.
4. Export these images as individual JPG or GIF files.
5. Click on the original image in your web editing tool and name it something like Rotate_Me in the Properties panel of your web editing software or in the HTML code. The code would look like: img src="/Smilies/Smiley1.png" alt="Smiley1" name="Rotate_Me" width="109" height="109" id="Rotate_Me".
6. Click at the top of your web page and choose Behaviors from the Windows menu (Dreamweaver). If you aren't using Dreamweaver, create a roll over button/swap image behavior in your web editing software or skip to step 7 and copy the Javascript from the illustration.
7. Add a new Behavior with the + menu and choose Swap Image as the type. Use the Browse button to locate the second file in your rotation. The illustration shows the Javascript code automatically generated by Dreamweaver. Copy this to your web page if your web editing tool doesn't auto-generate the code.
8. Click into the HTML code for your page, and insert the javascript you see in this next illustration into the HEAD section of your page, above the //-- and
/script tags. For a shortcut, you can download this code from Danilo Celic's online tutorial on rotating images with Dreamweaver (see Resources).
9. Customize the code to reflect the location and file names of the images that make up your rotation, and adjust the time between image swaps to control the speed of the rotation. 1000 = 1 second, so the code default is 5 seconds between image swaps. Your code would look something like Array('Smilies/Smiley1.png','Smilies/Smiley2.png','Smilies/Smiley3.png','Smilies/Smiley4.png'); and var delay = 1000;
10. Remove the unneeded MouseOver command Dreamweaver added to the BODY tag when setting the Swap Image behavior. You will find the code just below the Javascript you pasted in. It looks like: body onload="MM_preloadImages( something1.jpg)" onmouseover= "MM_swapImage 'Rotate_Me','','something2.jpg',1)". Make it look like: body onload="preloadImgs();randomImages();".
11. Find, then replace the image name "rotator" in the RandomImages function with the image name name you gave your Image in step 3. In the example used here, Rotate_Me is the image name so the start of the edited code would look like: MM_swapImage('Rotate_Me', ....
12. Save your web page file, upload it to your webserver along with all the graphics files and preview it in your web browser to test.
Tags: your page, editing tool, your editing, code would, code would look