ECA 225 Applied Online Programming images ECA 225

ECA 225 Applied Online Programming images ECA 225 Applied Interactive Programming

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. ECA 225 Applied Interactive Programming

HTTP client side initiates request v connection to server v server response is to download files, including. jpg or. gif v files stored in browser cache v 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. ECA 225 Applied Interactive Programming

Image object v When we insert an image into HTML code, we create an image object. <img name=‘image 1’ src=‘halle. jpg’ alt=‘My dog’ /> creates an Image object whose name is image 1 and src is halle. jpg ECA 225 Applied Interactive Programming

Image object v 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( ) Marley = new Image( ); then assign the src property of the new Image to a file Marley. src = “marley. jpg”; this image is automatically downloaded to the cache ECA 225 Applied Interactive Programming

Image object v cont … using dot syntax to access the various properties of an Image( ) object <img name=‘image 1’ src=‘halle. jpg’ alt=‘My dog’ width=‘ 250’ height=‘ 160’ /> to access the width property: my. Width = document. image 1. width; to access the src property my. Src = document. image 1. src; ECA 225 Applied Interactive Programming

Image object v using cont … dot syntax to change the src of an Image( ) <img name=‘image 1’ src=‘halle. jpg’ alt=‘My dog’ width=‘ 250’ height=‘ 160’ /> the following code changes the src attribute from its original value of halle. jpg to the src of the Marley object, marley. jpg document. image 1. src = Marley. src; ECA 225 Applied Interactive Programming

Image object v cont … to associate a change of images with a mouse. Over event <img name=‘image 1’ src=‘halle. jpg’ alt=‘My dog’ width=‘ 250’ height=‘ 160’ /> event handlers are called from HTML code, so the event handler is placed in HTML code, not inside the <script> tags <a on. Mouse. Over=‘document. image 1. src=Marley. src’ on. Mouse. Out=‘document. image 1. src=“halle. jpg” ‘> <img name=‘image 1’ src=‘halle. jpg’ alt=‘My dog’ width=‘ 250’ height=‘ 160’ /> </a> if you do not want the link to work leave out the href ECA 225 Applied Interactive Programming

Image object v In cont … browsers prior to IE 5+ and Netscape 6: on. Mouse. Over and on. Mouse. Out event handlers must be placed inside <a> tags, not inside the <img /> tag swapped images must have the same width and height dimensions ECA 225 Applied Interactive Programming

Image object v to cont … use a function to swap images <script type=‘text/javascript’ language=Java. Script’> Halle = new Image( ); Halle. src = ‘halle. jpg’; Marley = new Image( ); Marley. src = ‘marley. jpg’; function swap. Images( current. Image ){ document. image 1. src = current. Image; } </script> <a on. Mouse. Over=‘swap. Images( Marley. src )’ on. Mouse. Out= ‘swap. Images( Halle. src)‘> <img name=‘image 1’ src=‘halle. jpg’ alt=‘My dog’ width=‘ 250’ height=‘ 160’ /> </a> ECA 225 Applied Interactive Programming

Timers v set. Interval( ) v once called, it automatically fires at specific intervals v not supported by browsers prior to IE 4 and NN 4 v set. Interval( ) takes two parameters v the function to be called v the amount of time, in milliseconds, between firings set. Interval( function , milliseconds ); ECA 225 Applied Interactive Programming

Timers cont … var counter = 1; set. Interval( “start. Timer( )” , 1000 ); function start. Timer( ){ document. form 1. counter. value = counter++; <form name=‘form 1’> <input type=‘text’ name=‘counter’ value=‘ 0’> </form> ECA 225 Applied Interactive Programming }

Timers cont … v set. Interval( ) has a corresponding method named clear. Interval( ) which can be used to stop the timer v when set. Interval( ) is called it returns a unique ID number v to stop set. Interval pass the ID number returned by set. Interval( ) to clear. Interval( ) ECA 225 Applied Interactive Programming

Timers cont … var counter = 1; var my. Interval = set. Interval( “start. Timer( )” , 1000 ); function start. Timer( ){ document. form 1. counter. value = counter++; function stop. Timer( ){ clear. Interval( my. Interval ); } } <form name=‘form 1’> <input type=‘text’ name=‘counter’ value=‘ 0’> <input type=‘button’ value=‘Stop Timer’ on. Click=‘stop. Timer( )’> </form> ECA 225 Applied Interactive Programming

Timers cont … v set. Timeout( ) v once called, it fires only one time v to set up a timer that fires more than once, set. Timeout( ) must be called again v set. Timeout( ) takes two parameters v the function to be called v the amount of time, in milliseconds, until the function is called set. Timeout( function , milliseconds ); ECA 225 Applied Interactive Programming

Timers cont … var counter = 1; set. Timeout( “start. Timer( )” , 1000 ); function start. Timer( ){ document. form 1. counter. value = counter++; set. Timeout( “start. Timer( )” , 1000 ); } <form name=‘form 1’> <input type=‘text’ name=‘counter’ value=‘ 0’> </form> ECA 225 Applied Interactive Programming

Timers cont … v set. Timeout( ) has a corresponding method named clear. Timeout( ) which can be used to stop the timer v when set. Timeout( ) is called it returns a unique ID number v to stop set. Timeout pass the ID number returned by set. Timeout( ) to clear. Timeout( ) ECA 225 Applied Interactive Programming

Timers cont … var counter = 1; var my. Timeout = set. Timeout( “start. Timer( )” , 1000 ); function start. Timer( ){ document. form 1. counter. value = counter++; my. Timeout = set. Timeout( “start. Timer( )” , 1000 ); } function stop. Timer( ){ clear. Timeout( my. Timeout ); } <form name=‘form 1’> <input type=‘text’ name=‘counter’ value=‘ 0’> <input type=‘button’ value=‘Stop Timer’ on. Click=‘stop. Timer( )’> </form> ECA 225 Applied Interactive Programming