Lesson 7 Using Images with JavaScript

1. Lesson 7Using Images with JavaScript HTML and JavaScript BASICS, 4th Edition Barksdale / Turner

2. 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. 2

3. ad banner array cycling banner decrement entity code event floating-point number function hyperlink rollover image rollover Vocabulary 3

4. increment index real number slide show variable Vocabulary (continued) 4

5. 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 5

6. 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. 6

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

8. 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. 8

9. Teaching a Hyperlink to Roll Over (continued) The graphic to the right shows JavaScript events. 9 9

10. 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. 10

11. 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. 11

12. 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-pointnumber) is a numerical value that includes a decimal portion. 12

13. Creating a JavaScript Slide Show • When a user changes images by clicking Web page objects, it is an electronic slide show. JavaScript slide show 13

14. 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. 14

15. 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. 15 15