VirtualMV/JavaScript/Images

Overview

: JS and Images By the end of this page you will be able to: Manipulate images using JavaScript

Rotate image

 <!-- Paste this code into the HEAD section of your HTML document. -->
 <script type="text/javascript">
 var strImg = new Array("image1.png","image2.png","image3.png");
 // Change the images to your ones - remember array starts at 0
 var intImgNew = 0;
 var intImgTotal = strImg.length;
 function fnImgRotate() {
   intImgNew++;
   if (intImgNew == intImgTotal) {
     intImgNew = 0;
   }
 document.imgRotate.src=strImg[intImgNew];
 // set the time below for length of image display (5*1000 = 5 secs)
 setTimeout("fnImgRotate()", 5*1000);
 }
 window.onload=fnImgRotate;
 </script>
 <!-- The following image is needed in the BODY section -->
 <img src="image1.png" name="imgRotate" />

Click here for a working version

Trouble shooting

Note that the image src needs "name" not "id"

References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Images. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Images    (zotero)