1 lesson 7 using images with javascript html and javascript basics, 4 th edition barksdale / turner
TRANSCRIPT
1
Lesson 7Using Images with JavaScript
HTML and JavaScript BASICS, 4th Edition
Barksdale / Turner
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E22
Objectives
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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E33
Vocabulary
ad banner array cycling banner decrement entity code
event floating-point number function hyperlink rollover image rollover
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E44
Vocabulary (continued)
increment index real number slide show variable
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E55
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.– Some conditions are generated by the Web
browser software– However, most conditions are caused by user
actions
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E66
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.– Methods and functions are the same, except that
methods have been defined as part of the objects that make up the JavaScript programming environment.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E77
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.– 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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E88
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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E99
Teaching a Hyperlink to Roll Over (continued)
The graphic to the right shows JavaScript events.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E1010
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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E1111
Creating a Cycling Banner (continued)
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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E1212
Displaying Random Images
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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E1313
Creating a JavaScript Slide Show
When a user changes images by clicking Web page objects, it is an electronic slide show.
JavaScript slide show
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E1414
Creating a JavaScript Slide Show (continued)
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.
Le
sso
n 7
Barksdale / Turner HTML and JavaScript BASICS 4E1515
Summary
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.