Lesson 7
Using Images with JavaScript
HTML and JavaScript
BASICS, 4th Edition
1
Barksdale / Turner
Objectives



Lesson 7

Name and describe JavaScript events.
Create an image rollover.
Make a hyperlink rollover.
Construct a cycling banner.
Display random images.
Create a JavaScript slide show.

2
Barksdale / Turner

HTML and JavaScript BASICS 4E
Vocabulary



Lesson 7

ad banner
array
cycling banner
decrement
entity code

3
Barksdale / Turner





event
floating-point number
function
hyperlink rollover
image rollover
HTML and JavaScript BASICS 4E
Vocabulary (continued)



Lesson 7

increment
index
real number
slide show
variable

4
Barksdale / Turner
HTML and JavaScript BASICS 4E
Making Graphic Images Come
Alive


Acquiring an understanding of JavaScript
events is important for working with images.
An event is a system-level response to the
occurrence of some specific condition.
Lesson 7
–
5
–
Some conditions are generated by the Web
browser software
However, most conditions are caused by user
actions
Barksdale / Turner
HTML and JavaScript BASICS 4E
Making Graphic Images Come
Alive (continued)


Another important concept to master when
working with images is JavaScript functions.
A function is a segment of JavaScript code
that can be invoked or called.
Lesson 7
–
6
Methods and functions are the same, except that
methods have been defined as part of the objects
that make up the JavaScript programming
environment.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Making Graphic Images Come
Alive (continued)


Teaching an Image to Roll Over:
An image rollover changes the appearance
of an image when a visitor moves the mouse
pointer over the image.
Lesson 7
–
7
–
The onMouseOver event is generated when the
mouse pointer is over a particular object.
The onMouseOut event is generated when the
user moves the mouse pointer off of the object.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Teaching a Hyperlink to Roll Over

A hyperlink rollover is triggered when the
user moves the mouse pointer over a
hyperlink.
The code for an image rollover and a hyperlink
rollover are very similar.
Lesson 7
–
8
Barksdale / Turner
HTML and JavaScript BASICS 4E
Teaching a Hyperlink to Roll Over
(continued)
The graphic to the
right shows
JavaScript events.
Lesson 7

9
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating a Cycling Banner
A cycling banner (or ad banner) is a
sequence of graphic images that are displayed
one after another with a small pause between
each image.
Lesson 7

10
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating a Cycling Banner
(continued)

Lesson 7

11
The code to create a cycling banner includes
an array, an index, and an imgArray.
Array: a collection of similar objects,
accessed by means of a variable name and
an index.
–
–

imgArray: a variable name
Index: an integer variable that identifies which
element of an array is being referenced.
Note, to increment a number is to add 1 to it.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Displaying Random Images

Lesson 7

12

JavaScript has built-in support for random
number generation, which makes displaying
images in random order easy to do.
The source code is very similar to the code
for the cycling banner.
A real number (also called a floating-point
number) is a numerical value that includes a
decimal portion.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating a JavaScript Slide Show
When a user changes images by clicking Web
page objects, it is an electronic slide show.
Lesson 7

JavaScript slide show
13
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating a JavaScript Slide Show
(continued)

Lesson 7

Decrement means to subtract 1 from the
current value of a variable.
There are many entity codes available in
JavaScript. In this lesson you use  
which is the “non-breaking space” entity code.
14
Barksdale / Turner
HTML and JavaScript BASICS 4E
Lesson 7
Summary
15
In this lesson, you learned:
 How to use JavaScript events.
 How to create an image rollover.
 How to create a hyperlink rollover.
 How to create a cycling banner.
 How to display random images.
 How to create a JavaScript slide show.
Barksdale / Turner
HTML and JavaScript BASICS 4E