eca 225 applied interactive programming eca 225 applied online programming images

ECA 225 Applied Interactive Programming

ECA 225AppliedOnline

Programming

images


Review

Given these variables:

var first_name = “Michael”;

var last_name = “Barath”;

var feet = 5;

var height = 7;

What is the code to print the following sentence using the variables?

My name is Michael Barath. I am 5’ 7” tall.


HTTP client side initiates request connection to server server response is to download files, including .jpg or .gif files stored in browser cache

What happens if we have a rollover, where one image is swapped with a second as the mouse rolls over it?

If we have not downloaded the second image at the time of the original download, the browser must make another request.


Image object

When we insert an image into HTML code, we create an image object.

creates an Image object whose name is image1 and src is halle.jpg

<img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ />


Image object cont … Since we will be using a second image to replace the

original image, we must create a second Image object.

use the new constructor to create a new Image( )

then assign the src property of the new Image to a file

this image is automatically downloaded to the cache

Marley = new Image( );

Marley.src = “marley.jpg”;


Image object cont … using dot syntax to access the various properties of an

Image( ) object

to access the width property:

to access the src property

myWidth = document.image1.width;

mySrc = document.image1.src;

<img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ />


Image object cont …

using dot syntax to change the src of an Image( )

the following code changes the src attribute from its original value of halle.jpg to the src of the Marley object, marley.jpg

document.image1.src = Marley.src;




to associate a change of images with a mouseOver event

event handlers are called from HTML code, so the event handler is placed in HTML code, not inside the <script> tags

if you do not want the link to work leave out the href


<a onMouseOver=‘document.image1.src=Marley.src’ onMouseOut=‘document.image1.src=“halle.jpg” ‘> <img name=‘image1’

src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ /> </a>



In browsers prior to IE 5+ and Netscape 6:

onMouseOver and onMouseOut event handlers must be placed inside <a> tags, not inside the <img /> tag

swapped images must have the same width and height dimensions



to use a function to swap images

<a onMouseOver=‘swapImages( Marley.src )’ onMouseOut= ‘swapImages( Halle.src)‘> <img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ /> </a>

<script type=‘text/javascript’ language=JavaScript’>

Halle = new Image( );

Halle.src = ‘halle.jpg’;

Marley = new Image( );

Marley.src = ‘marley.jpg’;

function swapImages( currentImage ){ document.image1.src = currentImage; }

</script>


Timers setInterval( )

once called, it automatically fires at specific intervalsnot supported by browsers prior to IE4 and NN4

setInterval( ) takes two parameters the function to be called the amount of time, in milliseconds, between firings

setInterval( function , milliseconds );


Timers cont … var counter = 1;

setInterval( “startTimer( )” , 1000 );

function startTimer( ){document.form1.counter.value = counter++; }

<form name=‘form1’>

<input type=‘text’ name=‘counter’ value=‘0’>

</form>


Timers cont …

setInterval( ) has a corresponding method named clearInterval( ) which can be used to stop the timer

when setInterval( ) is called it returns a unique ID number

to stop setInterval pass the ID number returned by setInterval( ) to clearInterval( )



var myInterval = setInterval( “startTimer( )” , 1000 );

function startTimer( ){document.form1.counter.value = counter++; }

function stopTimer( ){clearInterval( myInterval ); }



<input type=‘button’ value=‘Stop Timer’ onClick=‘stopTimer( )’>

</form>


Timers cont … setTimeout( )

once called, it fires only one time to set up a timer that fires more than once, setTimeout( )

must be called again setTimeout( ) takes two parameters

the function to be called the amount of time, in milliseconds, until the function is

called

setTimeout( function , milliseconds );



setTimeout( “startTimer( )” , 1000 );

function startTimer( ){document.form1.counter.value = counter++;

setTimeout( “startTimer( )” , 1000 );

}



</form>


Timers cont …

setTimeout( ) has a corresponding method named clearTimeout( ) which can be used to stop the timer

when setTimeout( ) is called it returns a unique ID number

to stop setTimeout pass the ID number returned by setTimeout( ) to clearTimeout( )


Timers cont … var counter = 1; var myTimeout = setTimeout( “startTimer( )” , 1000 );function startTimer( ){

document.form1.counter.value = counter++; myTimeout = setTimeout( “startTimer( )” , 1000 );

}function stopTimer( ){

clearTimeout( myTimeout ); }



<input type=‘button’ value=‘Stop Timer’ onClick=‘stopTimer( )’>

</form>

eca 225 applied interactive programming eca 225 applied online programming images

Documents