LIS 523/5 - Images

The img tag can have a name attribute equal to a name that can be used to reference the image in scripting. By changing the src attribute of the image, you can change what image is actually displayed on the page. For example, in the form below, you can use the pull-down list to select which of 10 images will be displayed. Note that most browsers resize the image in the window to fit the size of the new source image.

In addition to the src attribute the following attributes can also be changed in more recent versions of JavaScript: border; width and height (the other of which is also adjusted proportionately); and hspace (horizontal space before and after the image) and vspace (vertical space above and below the image).

Preloading

To avoid delays in downloading new images during interaction, images can be predownloaded using the following form of scripting:

    tempImg=new Image()
    tempImg.src='URL'

Animation

Animation effects can be produced using the setTimeout method, which tells the browser to execute an expression after a specified number of milliseconds has elapsed. For example, clicking the following button will cause the images to progress from 0 to 9 over a period of about 5 seconds. The button's onClick attribute is simply "stepUp(0)", which refers to the following script:

    <script language="JavaScript1.1">
    <!-- JavaScript begins...
    function stepUp(n) {
        document.img2.src = n+'.gif'
        if (n < 9) {
           setTimeout("stepUp("+(n+1)+")", 500)
        }
    }
    // JavaScript ends -->
    </script>

Home

Last updated September 23, 2005.
This page maintained by Prof. Tim Craven
E-mail (text/plain only): craven@uwo.ca
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7