unit 2 — the exciting world of javascript
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/1.jpg)
Unit 2 — The Exciting World of JavaScript
Lesson 6 — Using Images with JavaScript
![Page 2: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/2.jpg)
The Exciting World of JavaScript2
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.
![Page 3: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/3.jpg)
The Exciting World of JavaScript3
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.
![Page 4: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/4.jpg)
The Exciting World of JavaScript4
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";
![Page 5: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/5.jpg)
The Exciting World of JavaScript5
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;
![Page 6: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/6.jpg)
The Exciting World of JavaScript6
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>
![Page 7: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/7.jpg)
The Exciting World of JavaScript7
Making Graphic Images Come Alive (cont.)
Result: the onMouseOver event turns the arrow red and onMouseOut turns the arrow blue.
![Page 8: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/8.jpg)
The Exciting World of JavaScript8
Event Handling Logic
Event handling: JavaScript event statements are placed within standard 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">
![Page 9: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/9.jpg)
The Exciting World of JavaScript9
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;
}
![Page 10: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/10.jpg)
The Exciting World of JavaScript10
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";
![Page 11: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/11.jpg)
The Exciting World of JavaScript11
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.
![Page 12: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/12.jpg)
The Exciting World of JavaScript12
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;
![Page 13: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/13.jpg)
The Exciting World of JavaScript13
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;
![Page 14: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/14.jpg)
The Exciting World of JavaScript14
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>
![Page 15: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/15.jpg)
The Exciting World of JavaScript15
Creating a Cycling Banner (cont.)
Result: The graphics cycle every 2000 milliseconds.
![Page 16: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/16.jpg)
The Exciting World of JavaScript16
Displaying Random Images
A cycling banner can display random images one after another with a small pause between each image change.
![Page 17: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/17.jpg)
The Exciting World of JavaScript17
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;
![Page 18: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/18.jpg)
The Exciting World of JavaScript18
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;
}
![Page 19: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/19.jpg)
The Exciting World of JavaScript19
Displaying Random Images (cont.)
Write the code to trigger the function.
<BODY onLoad="select()">
<CENTER>
<IMG NAME="banner" SRC="lions.gif">
</CENTER>
</BODY>
![Page 20: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/20.jpg)
The Exciting World of JavaScript20
Displaying Random Images (cont.)
Result: Random graphics cycle every 2000 milliseconds.
![Page 21: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/21.jpg)
The Exciting World of JavaScript21
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.
![Page 22: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/22.jpg)
The Exciting World of JavaScript22
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;
![Page 23: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/23.jpg)
The Exciting World of JavaScript23
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;
}
![Page 24: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/24.jpg)
The Exciting World of JavaScript24
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;
}
![Page 25: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/25.jpg)
The Exciting World of JavaScript25
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> <A HREF="javascript:doNext()">Next</A>
![Page 26: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/26.jpg)
The Exciting World of JavaScript26
Creating a JavaScript Slide Show (cont.)
Click Next to advance and Back to return to a previous slide.
![Page 27: Unit 2 — The Exciting World of JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062321/56814000550346895dab3564/html5/thumbnails/27.jpg)
The Exciting World of JavaScript27
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.