Image object

Using JavaScript you can create a lot of effects to images on the web page.
In this and the next lesson you will learn to work with the image object, to create image effects using JavaScript.
- The Image object represents an embedded image, for each <img> tag in an HTML document, an Image object is created.
All image elements are stored in the image array. Each image in a web page has assigned an index, starting from 0.
So, if you wanna access the first image object, you can use:   document.image[0]


The image object has various properties, for example, with the "height" property you can get or change the image height.
If there are multiple images on one page, it's harder to work with them using the index number. But each image can have an unique name (the "name" attribute) or an unique id (the "id" attribute), used with the getElementById(); as you can see in the fallowing example.
<img src="image.gif" alt="An image" name="name_im" id="id_im" width="98" height="100" onclick="getDim()" />
<script type="text/javascript"><!--
function getDim() {
  var wth = document.name_im.height;             // using the value of the name attribute
  var hgh = document.getElementById('id_im').height;         // using the value of the id attribute
  alert('Width = '+ wth+ '\n Height = '+ hgh);
}
--></script>
- Click on the image:
An image

Image object properties


1. Loading a new image

If you want to change an image on the page via JavaScript, use "src" property to set the value of src attribute, that makes to load the image from the new src value.
Here's an example you can understand how to make this change of images:
<img name="im2" src="img1.jpg" width="155" height="155" />
<form>
  <input type="button" onclick="document.im2.src='img2.jpg'" value="Change the picture">
</form>
- When the button is clicked, the "document.im2.src='img2.jpg" sets a new value for the SRC, and the new image will be loaded in the same place, with the same width and height.
image example

• Here is another example where we have an HTML page with two links (Back and Forth) that change multiple images in one place. The images are declared and stored in a variable (imgs).
To change the images we use two functions: "goNext" and "GoBack".
<html>
<head>
<title>Title</title>
<script type="text/javascript"><!--
var imgs = new Array("img1.jpg","img2.jpg","img3.jpg");
nr = 0;
function goBack() {
  if(document.im3 && nr > 0) {
    nr--;
    document.im3.src=imgs[nr];
  }
}

function goNext() {
  if(document.im3 && nr < (imgs.length - 1)) {
    nr++;
    document.im3.src=imgs[nr];
  }
}
--></script>
</head>
<body>
<h4>Pictures</h4>
<img src="img1.jpg" name="im3" width="155" height="155"><br>
<a href="javascript:goBack()"><<- Back</a> |
<a href="javascript:goNext()">Forth ->></a>
</body>
</html>
- This HTML code displays the fallowing result.

Pictures

Change picture
<<- Back | Forth ->>

2. Preloading images

In the previous example, the browser must wait until the new image is loaded, and then can display it. In case of large images, the loading may take too long. This can be avoided by "preloading images", all images used on the page will be loaded when the page is opened (in a JS script) and will be displayed only when the display command is executed.
Here's an example you can understand how to do this work:
<script type="text/javascript"><!--
var hiddenImg = new Image();
hiddenImg.src = "img2.jpg";
--></script>
<img name="im4" src="img1.jpg" width="155" height="155" /><br />
<button onclick="document.im4.src=hiddenImg.src">Change the pic</button>
- The code: "var hiddenImg = new Image();" creates a new image object.
- The code: "hiddenImg.src = "img2.jpg";" defines the scr of other image and store it in the "hiddenImg" instance.
- When the web page is loaded, it is executed this JS script that will load the "img2.jpg" and save the image in memory.
- When the user click on the button, the "document.im4.src=hiddenImg.src" instruction will use the image already preloaded into memory.
Change pic

3. Mouse-over effects

With mouse-over ("mouseover" and "mouseout") you can create effects (like changing a picture) which appear when the mouse is over an image area.
Here's a simple example:
<a href="#" onmouseover="document.im5.src='img1.jpg'" onmouseout="document.im5.src='img2.jpg'">
 <img src="img3.jpg" name="im5" width="155" height="155" border="0" alt="picture" />
</a>
- When the mouse passes over the image, it activates "onmouseover" event; when the mouse leaves the image area, "onmouseout" code is executed
- This example is more for study, to understand "mouse-over" effects. It's not suitable for adding it in a professional web page, becouse:
Here is a complete script that avoids the above problems, although longer, once written, it can easily be used in other web pages with a greater number of images.
<html>
<head>
<script type="text/javascript"><!--
   /* coursesweb.net */
// If the browser supports JavaScript
// Create array that will store the images
  browserOK = true;
  var pics = new Array();

  var objCount = 0;           // stores the number of images changed in the page

// this function preloads the images
  function preload(name, first, second) {
  if (browserOK) {
    pics[objCount] = new Array(3);
    pics[objCount][0] = new Image();
    pics[objCount][0].src = first;
    pics[objCount][1] = new Image();
    pics[objCount][1].src = second;
    pics[objCount][2] = name;
    objCount++;
  }
}

function on(name) {
  if (browserOK) {
    for (i = 0; i < objCount; i++) {
      if (document.images[pics[i][2]] != null)
      if (name != pics[i][2]) {
        document.images[pics[i][2]].src = pics[i][0].src;
      } else {
      // displays the second image when the mouse is over it
        document.images[pics[i][2]].src = pics[i][1].src;
      }
    }
  }
}

function off() {
  if (browserOK) {
    for (i = 0; i < objCount; i++) {
    // sends back all the4 images
      if (document.images[pics[i][2]] != null)
        document.images[pics[i][2]].src = pics[i][0].src;
    }
  }
}

// you have to specify wich images will be preloaded
// change the data below, according to the images you use
// if you use more image sets, add more of these lines
preload("link1", "img1.jpg", "img1t.jpg");
preload("link2", "img2.jpg", "img2t.jpg");
preload("link3", "img3.jpg", "img3t.jpg");
--></script>
</head>
<body>
<a href="pag1.html" onmouseover="on('link1')" onmouseout="off()">
  <img name="link1" src="link1.gif" width="100" height="100" border="0"></a> &nbsp;
<a href="pag2.html" onmouseover="on('link2')" onmouseout="off()">
  <img name="link2" src="link2.gif" width="100" height="100" border="0"></a> &nbsp;
<a href="pag3.html" onmouseover="on('link3')" onmouseout="off()">
  <img name="link3" src="link3.gif" width="100" height="100" border="0"></a>
</body>
</html>
- If you wanna test it, change the values of "preload("link1", "img1.jpg", "img1t.jpg"); ..." with those of the images you use.