Using img src= 'abc.gif' allows us to display images o

1
JavaScript more arrays, images
2
Image Object and images array

• Using ltimg src "abc.gif" gt 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 images0 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.images0.src "abc.gif"

3
Object Hierarchy for images
4
Medium exercise jex12.html
5
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.

6
To get a function to repeat

• The command to do that is
• stopIDsetInterval("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?

7
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)

8
Marquette Jackpot jex13.html

• Create 3 random image
• Stop the image from rotating
• When you stop and the 3 images displayed are
  thesame 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.