javascript and image

8/3/2019 Javascript and Image

http://slidepdf.com/reader/full/javascript-and-image 1/28

JavaScript and

Images

Lecture 23



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.



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.

onMouseOutonMouseOver

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, includingcalls to other functions or methods.



4


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



5


Come Alive (cont.)

No. 2: Write the functions.

function turnBlue(){

document.arrow.src = blueArrow.src;

return;

}

function turnRed()

{

document.arrow.src = redArrow.src;

return;

}

</SCRIPT> </HEAD>



6


Come Alive (cont.) 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>



7


Come Alive (cont.)

Result: the onMouseOver event turns the

arrow red and onMouseOut turns the arrowblue.



8

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">



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;

}



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



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.



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].src = "ohmy.gif";

var index = 0;



13


(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;

}



14


(cont.) No. 3: Write the code to trigger the

function.

<BODY onLoad="cycle()">

<CENTER>

<IMG NAME="banner" SRC="lions.gif">

</CENTER>

</BODY>



<HTML> <HE AD>

<TITLE>Cycling Banner</TITLE>

<SCRIPT>

var imgArray = new Array(4);

imgArray[0] = new Image;imgArray[0].src = "lions.gif";




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> </HE AD>

<BODY onLoad="cycle()">

<CENTER>

<IMG NAME="banner"

SRC="lions.gif"></CENTER> </BODY> </HTML>



16


(cont.) Result: The graphics cycle every 2000

milliseconds.



17

Displaying Random Images

A cycling banner

can display

random imagesone after another

with a small pause

between each

image change.



18


(cont.) No. 1: Define the graphics array.



imgArray[0].src = "lions.gif";imgArray[1] = new Image;



imgArray[2].src = "bears.gif";



var index = 0;



19


(cont.) Write a select() function.

function select()

{

index = Math.floor(Math.random() * 4);

document.banner.src = imgArray[index].src;

setTimeout("select()", 2000);

return;

}



20


(cont.) Write the code to trigger the function.

<BODY onLoad="select()">

<CENTER>

<IMG NAME="banner" SRC="lions.gif">

</CEN

TER>

</BODY>



21


(cont.) Result: Random graphics cycle every 2000

milliseconds.



22

Creating a JavaScript Slide

Show When you allow

the user to change

the image by

clicking on someobject with the

mouse, the end

result is something

akin to a slideshow.



23


Show (cont.) No. 1: Define the array.



imgArray[0].src = "lions.gif";imgArray[1] = new Image;



imgArray[2].src = "bears.gif";imgArray[3] = new Image;


var index = 0;



24


Show (cont.) No. 2: Write a doBack() function.

function doBack()

{

if (index > 0)

{

index--;

document.slideshow.src = imgArray[index].src;

}

return;

}



25


Show (cont.)

No. 3: Write a doNext() function.

function doNext(){

if (index < 3)

{

index++;

document.slideshow.src = imgArray[index].src;

}

return;

}



26


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>

</CENTER> </BODY>



27


Show (cont.) Click Next to

advance and

Back to return toa previous slide.



28

Summary

Now you should understand the names and

uses of JavaScript events.

You can create an image rollover and canmake a hyperlink rollover.

You can build a cycling banner.

You can display random images.

You can create a JavaScript Slide Show.

javascript and image

Documents