Javascript Lesson 10

Foreword

This lesson handles about The Image Object which is used to make slideshows and rollovers.

10.1 The Image Object

The Image Object is a property of the document object.
The Image Object has 11 properties:

  • border
  • complete
  • height
  • hspace
  • lowsrc
  • name
  • src
  • vspace
  • width
  • x
  • y

It does not have any methods. Only the src property is settable and the most used, the rest you can only read their value.
You can create an Image Object using the Image Tag:

<img src="ImageURL" name="ImageName">

The Image Tag has other important properties such as width and height.
You can refer to the Image Object in JavaScript using the following syntax:

document.ImageName

You can load a different image into your document, even after the page has finished loading, using the src property of the Image Object:

document.ImageName.src = "ImageURL"

You will use this to make slide shows and rollovers.

10.2 Slideshows

Slideshows in JavaScript are not very difficult, but you need to remember some important facts to make the slideshow more user friendly:

  • Preload the images. This way the user won't have to wait 10 seconds before the next image appears after clicking next.
  • Clicking next while at the last image of the slideshow should show the first image.
  • Clicking previous while at the first image of the slideshow should show the last image.
  • The images must be the same size

Below is an example of a slideshow:


         Previous                                 Next

Here is the code used in the Body section:

<table>
<tr>
<td><img src="/learn/javascript/BSD.jpg" name="slideImage"></td>
</tr>
<tr>
<td><a href="JavaScript:previousImage()">Previous</a></td><td><a href="JavaScript:nextImage()">Next</a></td>
</tr>
</table>

This code calls a JavaScript function when one of the links is clicked. It is important to give the Image Object a name.
Below is the part that goes in the Head section. The URL's of the images are in an Array. The number of images is equal to the length property of the Array. The advantage of doing it this way, instead of just using the constant 4, is that you can add or subtract images from the Array without having to make any other changes to the script.
I added comment tags to explain the effect of the code completely:

<script language="JavaScript">
<!--

/* Here you make an array with all the URL's of the images you would like to have in your slideshow.*/

var image = new Array("/learn/javascript/BSD.jpg", "/learn/javascript/Apple.jpg", 
"/learn/javascript/Linux.png", "/learn/javascript/Windows.jpg")

var imgNumber=1

/* This number is used to refer to a value of the Array and to know what image should be shown next. */


var numberOfImg = image.length

/* This is the total amount of images you use, it is used to determine if the imgNumber can still grow. */


/* Now it's time to make the functions for the next and previous buttons */

function previousImage(){
  if(imgNumber > 1){
    imgNumber--
    }
	
/* The if statement is used to know if you aren't already at the first image, because if you are, imgNumber may not decrease. */
 
  else{
  	imgNumber = numberOfImg
	}
	
/* If you already are at the first image, and you click the previous button, the slideshow must show the last image. */


  document.slideImage.src = image[imgNumber-1]
  
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */


  }
function nextImage(){
  if(imgNumber < numberOfImg){
    imgNumber++
    }
	
/* The if statement is used to know if you aren't already at the last image, because if you are, imgNumber may not increase. */

  else{
  	imgNumber = 1
	}
	
/* If you already are at the last image, and you click the next button, the slideshow must show the first image. */


  document.slideImage.src = image[imgNumber-1]
  
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */


  }
  
  
/* Now it is time for the code that preloads the images. */

/* Check if your browser supports the Image Object. */

if(document.images){


   /* Create a new Image Object. */
   
   var image1 = new Image()
   
   
   /* Give the source of the image to the Image Object. */
   
   image1.src = "/learn/javascript/BSD.jpg"
   
   
   /* Repeat this for all the images you would like to preload.
   
   Make sure that you do not preload too many images, this will make your document load slow. */
   var image2 = new Image()
   image2.src = "/learn/javascript/Apple.jpg"
   var image3 = new Image()
   image3.src = "/learn/javascript/Linux.png"
   var image4 = new Image()
   image4.src = "/learn/javascript/Windows.jpg"
   }
   
//-->
</script>

The code looks long, but that's just because of the comments, there are only 34 lines of real code.

10.3 Rollovers

To make a Rollover, you must first create two images that are the same size. All that really happens in a Rollover is the first image is normally shown, the second image is shown when you place the mouse over the image. Below is an example of a Rollover:



The two images used for this rollover are:

Here is the code for the Body section:

<a href="/learn/javascript/lesson10.php" onMouseOver = "document.imgLesson.src='/learn/javascript/imgLesson10_on.png'" 
onMouseOut = "document.imgLesson.src='/learn/javascript/imgLesson10_off.png'">
<img src="/learn/javascript/imgLesson10_off.png" name="imgLesson">
</a>

First of all you have to give the Image Object a name, so you will be able to refer to the object.
In the Anchor Tag, the onMouseOver event loads the second image and the onMouseOut event loads the original image. You should not forget the onMouseOut event, if you do, you will still see the second image when you move your mouse away from the image.
This is the code for the Head section to preload the images:

<script language="JavaScript">
<!--
if(document.images){
  var lessonOff = new Image()
  lessonOff.src = "/learn/javascript/imgLesson10_off.png"
  var lessonOn = new Image() 
  lessonOn.src = "/learn/javascript/imgLesson10_on.png"
  }
//-->
</script>

10.4 Exercices

  • Make your own slideshow.
  • Make your own rollover.
Home | Code | Learn
© 2007-2008 ProgLogic, all rights reserved. | ProgLogic.com is created by Stijn Strickx. | e-mail