JavaScript – more arrays, images

Image Object and images[] array  Using allows us to display images on webpages. What if we want more control of what to show.  When a webpage with images is loaded by a browser, an images[] array is created. The first image is loaded onto images[0] and so on.  Unlike, GUI such as buttons etc, where they are the properties of the form, images are properties of the document.  In order to display an image using javascript. The command is straight forward as such. document.images[0].src= "abc.gif"

Object Hierarchy for images

Medium exercise: jex12.html

Medium Exercise  Instead of 4 buttons, you only have one now.  When you press the button, it will randomly select a picture  When you press random rotate, it will randomly pick a picture to display after a set interval  Stop random, will stop this process.

To get a function to repeat  The command to do that is stopID=setInterval("f1", 1000)  which means after every 1000 milliseconds, you will call function f1() again.  In order to stop the animation, you do the following clearInterval(stopID);  Where do you put this setInterval and clearInterval function?

How to include the rotation  You need to write two function and declare a global variable. var stopID // together with other variables //declaration function rotatePicture() { stopID = setInterval("disFirst()", 500); } function rotateStop() { clearInterval(stopID); }

Marquette Jackpot: jex13.html  Create 3 random image  Stop the image from rotating  When you stop and the 3 images displayed are the same you alert “JACKPOT”  Good Luck  Hint: You might want to rotate slower initially to know you can stop in time to see you hit the jackpot.