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

2. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 22 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.

3. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Vocabulary ad banner array cycling banner decrement entity code event floating-point number function hyperlink rollover image rollover

4. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 Vocabulary (continued) increment index real number slide show variable

5. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 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

6. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 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.

7. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 77 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.

8. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 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.

9. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 99 Teaching a Hyperlink to Roll Over (continued) The graphic to the right shows JavaScript events.

10. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

11. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

12. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 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-point number) is a numerical value that includes a decimal portion.

13. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 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

14. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.

15. Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 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.