1 / 27

Unit 2 — The Exciting World of JavaScript

Unit 2 — The Exciting World of JavaScript. Lesson 6 — Using Images with JavaScript. Objectives. Understand the names and usage of JavaScript events. Create an image rollover. Make a hyperlink rollover. Build a cycling banner. Display random images. Create a JavaScript slide show.

malo
Download Presentation

Unit 2 — The Exciting World of 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. Unit 2 — The Exciting World of JavaScript Lesson 6 — Using Images with JavaScript

  2. Objectives • Understand the names and usage of JavaScript events. • Create an image rollover. • Make a hyperlink rollover. • Build a cycling banner. • Display random images. • Create a JavaScript slide show. The Exciting World of JavaScript

  3. Making Graphic Images Come Alive • Event: This is an operating system response to the occurrence of a specific condition. It can invoke a function. onMouseOut onMouseOver • Function: This is a piece of JavaScript written by the programmer that is called upon to perform certain tasks. It can contain any number of JavaScript statements, including calls to other functions or methods. The Exciting World of JavaScript

  4. Making Graphic Images Come Alive (cont.) • To make an image rollover, you must • No. 1: Define the variables. <HTML> <HEAD> <TITLE>HTML and JavaScript</TITLE> <SCRIPT> var blueArrow = new Image; var redArrow = new Image; blueArrow.src = "bluearrow.gif"; redArrow.src = "redarrow.gif"; The Exciting World of JavaScript

  5. Making Graphic Images Come Alive (cont.) • No. 2: Write the functions. function turnBlue() { document.arrow.src = blueArrow.src; return; } function turnRed() { document.arrow.src = redArrow.src; return; The Exciting World of JavaScript

  6. Making Graphic Images Come Alive (cont.) • No. 3: Describe the events. <BODY> <CENTER> <A HREF="webpage.html" onMouseOut="turnBlue()" onMouseOver="turnRed()"> <IMG NAME="arrow" SRC="bluearrow.gif"> </A> </CENTER> </BODY> </HTML> The Exciting World of JavaScript

  7. Making Graphic Images Come Alive (cont.) • Result: the onMouseOver event turns the arrow red and onMouseOut turns the arrow blue. The Exciting World of JavaScript

  8. Event Handling Logic • Event handling: JavaScript event statements are placed withinstandard HTML tags. For example, the onMouseOver and onMouseOut events are located within the opening anchor (<A>) tag. These events call the functions turnBlue() and turnRed(). <A HREF= onMouseOut="turnBlue()" onMouseOver="turnRed()"> <IMG NAME="arrow" SRC="bluearrow.gif"> The Exciting World of JavaScript

  9. Event Handling Logic (cont.) • The turnBlue() and turnRed() functions call: function turnBlue() { document.arrow.src = blueArrow.src; return; } function turnRed() { document.arrow.src = redArrow.src; return; } The Exciting World of JavaScript

  10. Event Handling Logic (cont.) • The document.arrow.src = blueArrow.src; and document.arrow.src = redArrow.src; objects have already been assigned. var blueArrow = new Image; var redArrow = new Image; blueArrow.src = "bluearrow.gif"; redArrow.src = "redarrow.gif"; The Exciting World of JavaScript

  11. Create a Cycling Banner • A cycling banner is really nothing more than a sequence of graphic images that are displayed one after another with a small pause between each image change. The Exciting World of JavaScript

  12. Creating a Cycling Banner (cont.) • No. 1: Define the graphics array. <var imgArray = new Array(4); imgArray[0] = new Image; imgArray[0].src = "lions.gif"; imgArray[1] = new Image; imgArray[1].src = "tigers.gif"; imgArray[2] = new Image; imgArray[2].src = "bears.gif"; imgArray[3] = new Image; imgArray[3].src = "ohmy.gif"; var index = 0; The Exciting World of JavaScript

  13. Creating a Cycling Banner (cont.) • No. 2: Write the cycle() function. function cycle() { document.banner.src = imgArray[index].src; index++; if (index == 4) { index = 0; } setTimeout("cycle()", 2000); return; The Exciting World of JavaScript

  14. Creating a Cycling Banner (cont.) • No. 3: Write the code to trigger the function. <BODY onLoad="cycle()"> <CENTER> <IMG NAME="banner" SRC="lions.gif"> </CENTER> </BODY> The Exciting World of JavaScript

  15. Creating a Cycling Banner (cont.) • Result: The graphics cycle every 2000 milliseconds. The Exciting World of JavaScript

  16. Displaying Random Images • A cycling banner can display random images one after another with a small pause between each image change. The Exciting World of JavaScript

  17. Displaying Random Images (cont.) • No. 1: Define the graphics array. <var imgArray = new Array(4); imgArray[0] = new Image; imgArray[0].src = "lions.gif"; imgArray[1] = new Image; imgArray[1].src = "tigers.gif"; imgArray[2] = new Image; imgArray[2].src = "bears.gif"; imgArray[3] = new Image; imgArray[3].src = "ohmy.gif"; var index = 0; The Exciting World of JavaScript

  18. Displaying Random Images (cont.) • Write a select() function. function select() { index = Math.floor(Math.random() * 4); document.banner.src = imgArray[index].src; setTimeout("select()", 2000); return; } The Exciting World of JavaScript

  19. Displaying Random Images (cont.) • Write the code to trigger the function. <BODY onLoad="select()"> <CENTER> <IMG NAME="banner" SRC="lions.gif"> </CENTER> </BODY> The Exciting World of JavaScript

  20. Displaying Random Images (cont.) • Result: Random graphics cycle every 2000 milliseconds. The Exciting World of JavaScript

  21. Creating a JavaScript Slide Show • When you allow the user to change the image by clicking on some object with the mouse, the end result is something akin to a slide show. The Exciting World of JavaScript

  22. Creating a JavaScript Slide Show (cont.) • No. 1: Define the array. <var imgArray = new Array(4); imgArray[0] = new Image; imgArray[0].src = "lions.gif"; imgArray[1] = new Image; imgArray[1].src = "tigers.gif"; imgArray[2] = new Image; imgArray[2].src = "bears.gif"; imgArray[3] = new Image; imgArray[3].src = "ohmy.gif"; var index = 0; The Exciting World of JavaScript

  23. Creating a JavaScript Slide Show (cont.) • No. 2: Write a doBack() function. function doBack() { if (index > 0) { index--; document.slideshow.src = imgArray[index].src; } return; } The Exciting World of JavaScript

  24. Creating a JavaScript Slide Show (cont.) • No. 3: Write a doNext() function. function doNext() { if (index < 3) { index++; document.slideshow.src = imgArray[index].src; } return; } The Exciting World of JavaScript

  25. Creating a JavaScript Slide Show (cont.) • No. 4: Write the code to trigger the functions. <BODY> <CENTER> <H2>My JavaScript Slide Show</H2> <P> <IMG NAME="slideshow" SRC="lions.gif"> <P> <A HREF="javascript:doBack()">Back</A> &nbsp;&nbsp;&nbsp; <A HREF="javascript:doNext()">Next</A> The Exciting World of JavaScript

  26. Creating a JavaScript Slide Show (cont.) • Click Next to advance and Back to return to a previous slide. The Exciting World of JavaScript

  27. Summary • You can understand the names and uses of JavaScript events. • You can create an image rollover. • You can make a hyperlink rollover. • You can build a cycling banner. • You can display random images. • You can create a JavaScript slide show. The Exciting World of JavaScript

More Related