ECA 225

1. ECA 225 AppliedOnline Programming images ECA 225 Applied Interactive Programming

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

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

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

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

6. 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 <img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ /> myWidth = document.image1.width; mySrc = document.image1.src; ECA 225 Applied Interactive Programming

7. 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 <img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ /> document.image1.src = Marley.src; ECA 225 Applied Interactive Programming

8. Image object cont … • 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 <img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ /> <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> ECA 225 Applied Interactive Programming

9. Image object cont … • In browsers prior to IE 5+ and Netscape 6: onMouseOver and onMouseOut event handlers must be placed inside <a> tags, not inside the <img /> tagswapped images must have the same width and height dimensions ECA 225 Applied Interactive Programming

10. Image object cont … • to use a function to swap images <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> <a onMouseOver=‘swapImages( Marley.src )’ onMouseOut= ‘swapImages( Halle.src)‘> <img name=‘image1’ src=‘halle.jpg’ alt=‘My dog’ width=‘250’ height=‘160’ /> </a> ECA 225 Applied Interactive Programming

11. Timers • setInterval( ) • once called, it automatically fires at specific intervals • not 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 ); ECA 225 Applied Interactive Programming

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

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

14. Timers cont … var counter = 1; var myInterval = setInterval( “startTimer( )” , 1000 ); function startTimer( ){ document.form1.counter.value = counter++; } function stopTimer( ){ clearInterval( myInterval ); } <form name=‘form1’> <input type=‘text’ name=‘counter’ value=‘0’> <input type=‘button’ value=‘Stop Timer’ onClick=‘stopTimer( )’> </form> ECA 225 Applied Interactive Programming

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

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

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

18. 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 ); } <form name=‘form1’> <input type=‘text’ name=‘counter’ value=‘0’> <input type=‘button’ value=‘Stop Timer’ onClick=‘stopTimer( )’> </form> ECA 225 Applied Interactive Programming