Javascript and Image

JavaScript and Images
Lecture 23
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.

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

No. 2: Write the functions.

function turnBlue() { document.arrow.src = blueArrow.src; return; } function turnRed() { document.arrow.src = redArrow.src; return; } </SCRIPT> </HEAD>

No. 3: Describe the events.

<BODY> <CENTER> <A HREF="http://bauyoonteck.googlepages.com/" onMouseOut="turnBlue()" onMouseOver="turnRed()"> <IMG NAME="arrow" SRC="bluearrow.gif"> </A> </CENTER> </BODY> </HTML>

Result: the onMouseOver event turns the arrow red and onMouseOut turns the arrow blue.
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">
8
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; }
9
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";
10
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.
11
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;
12

No. 2: Write the cycle() function.

function cycle() { document.banner.src = imgArray[index].src; index++; if (index == 4) { index = 0; } setTimeout("cycle()", 2000); return; }
13

No. 3: Write the code to trigger the function.

<BODY onLoad="cycle()"> <CENTER> <IMG NAME="banner" SRC="lions.gif"> </CENTER> </BODY>
14
<HTML> <HEAD> <TITLE>Cycling Banner</TITLE> <SCRIPT> 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; function cycle() { document.banner.src = imgArray[index].src; index++; if (index == 4) { index = 0; } setTimeout("cycle()", 2000); return; } </SCRIPT> </HEAD>
<BODY onLoad="cycle()"> <CENTER> <IMG NAME="banner" SRC="lions.gif"> </CENTER> </BODY> </HTML>

Result: The graphics cycle every 2000 milliseconds.
16
Displaying Random Images

A cycling banner can display random images one after another with a small pause between each image change.
17
Displaying Random Images (cont.)

No. 1: Define the graphics array.

18

Write a select() function.

function select() { index = Math.floor(Math.random() * 4); document.banner.src = imgArray[index].src; setTimeout("select()", 2000); return; }
19

Write the code to trigger the function.

<BODY onLoad="select()"> <CENTER> <IMG NAME="banner" SRC="lions.gif"> </CENTER> </BODY>
20

Result: Random graphics cycle every 2000 milliseconds.
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.
22
Creating a JavaScript Slide Show (cont.)

No. 1: Define the array.

23

No. 2: Write a doBack() function.

function doBack() { if (index > 0) { index--; document.slideshow.src = imgArray[index].src; } return; }
24

No. 3: Write a doNext() function.

function doNext() { if (index < 3) { index++; document.slideshow.src = imgArray[index].src; } return; }
25

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> </CENTER> </BODY>
26

Click Next to advance and Back to return to a previous slide.
27
Summary
Now you should understand the names and uses of JavaScript events. You can create an image rollover and can make a hyperlink rollover. You can build a cycling banner. You can display random images. You can create a JavaScript Slide Show.

28

Javascript and Image

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Javascript and Image

Încărcat de

Drepturi de autor:

Formate disponibile

JavaScript and Images

Making Graphic Images Come Alive

Making Graphic Images Come Alive (cont.)

To make an image rollover, you must

No. 1: Define the variables.

Making Graphic Images Come Alive (cont.)

No. 2: Write the functions.

Making Graphic Images Come Alive (cont.)

No. 3: Describe the events.

Making Graphic Images Come Alive (cont.)

Event Handling Logic

Event Handling Logic (cont.)

The turnBlue() and turnRed() functions call:

Event Handling Logic (cont.)

Create a Cycling Banner

Creating a Cycling Banner (cont.)

No. 1: Define the graphics array.

Creating a Cycling Banner (cont.)

No. 2: Write the cycle() function.

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> </HTML>

Creating a Cycling Banner (cont.)

Result: The graphics cycle every 2000 milliseconds.

Displaying Random Images

Displaying Random Images (cont.)

No. 1: Define the graphics array.

Displaying Random Images (cont.)

Write a select() function.

Displaying Random Images (cont.)

Write the code to trigger the function.

Displaying Random Images (cont.)

Result: Random graphics cycle every 2000 milliseconds.

Creating a JavaScript Slide Show

Creating a JavaScript Slide Show (cont.)

No. 1: Define the array.

Creating a JavaScript Slide Show (cont.)

No. 2: Write a doBack() function.

Creating a JavaScript Slide Show (cont.)

No. 3: Write a doNext() function.

Creating a JavaScript Slide Show (cont.)

No. 4: Write the code to trigger the functions.

Creating a JavaScript Slide Show (cont.)

Click Next to advance and Back to return to a previous slide.

S-ar putea să vă placă și