1 / 15

Lesson 7 Using Images with JavaScript

Lesson 7 Using Images with JavaScript. HTML and JavaScript BASICS, 4 th Edition. Barksdale / Turner. Objectives. Name and describe JavaScript events. Create an image rollover. Make a hyperlink rollover. Construct a cycling banner. Display random images.

clive
Télécharger la présentation

Lesson 7 Using Images with JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related