Rotating Images

1. In Design View, open the file that contains the image you wish to rotate
2. Select the image you wish to rotate, and assign an "id" in the lower left hand corner
   
   
   Here we've selected our main image, and given it an "id" of "homerotate"
3. There are two JavaScripts that are used to make our image rotate. The first is a shared file that can be found at http://www.wcas.northwestern.edu/shared/js/rotate.js
4. To insert this script, go to Insert > HMTL > Script Objects > Script
   
   
5. To insert the shared script, simply paste the URL ("http://www.wcas.northwestern.edu/shared/js/rotate.js") in the Source box.
   
   Press OK and the script will be inserted.
   

   
   Dreamweaver MX 2004 users, switch the the source code view and paste in the following code any where in the page (preferably near the image or in the "head" editable region near the top of the code):
   
   <script src="http://www.wcas.northwestern.edu/shared/js/rotate.js" language="javascript" type="text/javascript"></script>
   
   
6. To insert the next script, we need to insert the code in the Content box. There are two function we must invoke to make our image rotate.
   
   • add_rotating_image(id, src)
     
     This function adds images to our list of images to rotate. id should be the same id we applied to our image earlier. src should be the file path to the image we want to add.  The file path is the folder and name of the image (e.g., "images/home1.jpg")
     
   • rotate_image(id, seconds)
     
     This function causes our list of images to rotate, and declares how many seconds between each change. id should be the same id as we applied to our image earlier, and used in add_rotating_image(id, src). seconds should be set to the number of seconds you want before rotations.
7. If we wanted to add 5 images, and have them rotate after 3 seconds, we would insert the following:
   add_rotating_image("homerotate", "images/home1.jpg");
   add_rotating_image("homerotate", "images/home2.jpg");
   add_rotating_image("homerotate", "images/home3.jpg");
   add_rotating_image("homerotate", "images/home4.jpg");
   add_rotating_image("homerotate", "images/home5.jpg");
   
   rotate_image("homerotate", 3);
   

*Be sure to include the original image in our list. Although it is already there, if it is left out of our list, it will not be included in the rotation after one cycle.

Click OK and we have completed our rotate script. Save your file and test it in your browser.