Using Images with JavaScript

1
Chapter 6

• Using Images with JavaScript

2
Events

• To work well with images, you need to understand
  events
• Event A system-level response to the occurrence
  of some specific condition
• In English If you do something on the screen,
  something should happen in the program.
• Move the mouse
• Click on something
• Etc.

3
Function

• A segment of JavaScript code that can be invoked
  or called.
• document.write()
• alert()
• No real difference between methods and functions
  except
• Methods are defined by JavaScript
• Functions are defined by the programmer

4
Image Roll Over

• Task
• Cause an image to change when the pointer is
  moved over it by the mouse
• Object
• The Images blueArrow and redArrow
• Events
• onMouseOver
• onMouseOut
• Images at I\Machuca\Comp 230

5
First Part
lthtmlgtltheadgtlttitlegtHTML and JavaScriptlt/titlegt ltSC
RIPTgt var blueArrow new Image blueArrow.src
"bluearrow.gif" var redArrow new
Image redArrow.src "redarrow.gif"
6
Definitions

• Var
• variable. This is where you define things that
  are unique to the operation of this program
• new
• Create a new of some object.
• In this case, we are creating a variable that
  will inherit the properties of a super class
  object called Image

7
Create the functions
function turnBlue() document.arrow.src
blueArrow.src return function
turnRed() document.arrow.src
redArrow.src return
8
Explanation

• On the document there will be an image to which
  we will assign the name arrow
• The function is a little program
• In the case of turnBlue, there will be an event
  later which will initiate this function
• The blueArrow will then be assigned to arrow
• Then control will return to the calling script

9
The Guts
lt/SCRIPTgtlt/headgt ltbodygtltCentergt lta
HREF"webpage.html onMouseOut"turnBlue()"
onMouseOver"turnRed()"gt ltimg name"arrow"
src"bluearrow.gif"gt lt/agtlt/centergtlt/bodygtlt/htmlgt
10
Explaination

• Webpage.html allows the HREF to refer to itself.
• There are 2 events on this hyperlink
• onMouseOut
• onMouseOver
• Each event will call a different function
• Here the image is identified as arrow and given
  a default value of bluearrow.gif

11
Before
After
12
JavaScript Events
13
JavaScript Events
14
JavaScript Events
15
Hyperlink Roll Over

• Lets do the same thing but make the hyperlink
  cause the roll over.

16
Add this code
lta HREF"webpage.html" onMouseOut"turnBlue()"
onMouseOver"turnRed()"gt Next Page lt/agt ltpgt ltimg
name"arrow" src"bluearrow.gif"gt
17
Results
18
Creating a Cycling Banner

• A cycling banner is a image that changes
• More precisely, it is a series of images that
  change one after another.
• Trick
• Create an array
• Insert one image for each item in the array
• Cycle through the array to display each item in
  turn.

19
First, build the array
lthtmlgtltheadgtlttitlegtJavaScript Cycling
Bannerlt/titlegt ltscriptgt var imgArray new
Array(4) imgArray0 new Image imgArray0.src
"lions.gif" imgArray1 new
Image imgArray1.src "tigers.gif" imgArray2
new Image imgArray2.src
"bears.gif" imgArray3 new Image imgArray3.
src "ohmy.gif" var index0
20
What it means
lthtmlgtltheadgtlttitlegtJavaScript Cycling
Bannerlt/titlegt ltscriptgt var imgArray new
Array(4) imgArray0 new Image imgArray0.src
"lions.gif" imgArray1 new
Image imgArray1.src "tigers.gif" imgArray2
new Image imgArray2.src
"bears.gif" imgArray3 new Image imgArray3.
src "ohmy.gif" var index0
Zero based
Total items - 1
Src property of Image
Define variables
21
Now build the Function
function cycle() document.banner.src
imgArrayindex.src index if (index
4) index 0 setTimeout("cycle()",
2000) return lt/scriptgtlt/headgt
Treat this like a looping structure
Change the image
Incrementer
Test
Reset
Timer in Miliseconds
22
Now define the event
ltbody onLoad"cycle()"gt ltcentergt ltimg
name"banner" src"lions.gif"gt lt/centergtlt/bodygtlt/h
tmlgt
Event that triggers the cycle function
Initial value of the image is lions.gif
Now run it!
23
Randomizing the Cycle

• Now, lets take eight and change it to
  randomize the images to display
• To do this we need in incorporate the Math object
  and two of its methods
• .random
• .floor

24
Random number generator

• Typically, a random number generator is a
  function or a program that will create
  randomized numbers based on some seed value
• Since the generator is a program, if you install
  the same seed, the numbers will randomize in a
  known fashion (or be NOT random)
• Seeds will often come from the system clock
  milliseconds, or a modulus division between two
  values.

25
Random number generator

• The .random method will return a value between 0
  and 1 inclusive
• We will take that value
• Multiply it by 4 (for the 4 images we are using)
• Strip off the decimal with the .floor method
• Use the resulting number to identify the image to
  display
• First, Save As the program to js-nine.html
• Then, strip out the cycle() function

26
Add the Function select()
function select() index Math.floor(Math.rando
m() 4) document.banner.src
imgArrayindex.src setTimeout("select()",
2000) return lt/scriptgtlt/headgt ltbody
onLoad"select()"gt