Inside Technique : Back to Basics with Images : Scripting Images

In Netscape Navigator 3.0 images became accessible through the object model. The ability to script images was a major step to creating interactive pages. Internet Explorer support for scripting images came in Internet Explorer 4.0 (Internet Explorer 3.0 does not provide access to images). As we discuss scripting images, we are going to focus on what is supported by both browsers. We will point out when the support differs.

Images are exposed to scripting through the images collection on the document. A collection works very much like an array and gives you access to all the images on the page. The image collection is in the same order as they appear in the HTML source. When using the images collection, you can access the image based on its position in the collection or based on the identifier specified by the HTML Name attribute. Using our example from the prior page:

<A HREF="/dhtml/insidedhtml.asp">
  <IMG NAME=bookCover 
       SUPRESS BORDER=0 
       SRC="images/insided.gif" 
       WIDTH=100 HEIGHT=200 
       HSPACE=5 VSPACE=5
       ALT="Book cover for Scott Isaacs's book, Inside Dynamic HTML">
</A>
<SCRIPT>
  // 1 - The src of the first image on the page
  alert(document.images[0].src) 

  // 2 - The src of the image with the name, BookCover
  alert(document.images.bookCover.src) 

  // 3 - The src of the image with the name, BookCover
  alert(document.images["bookCover"].src) 
</SCRIPT>

All three lines above access the same image. The first line accesses the image using its position in the collection. We highly recommend you do not write scripts relying on the position of the element. You can very easily break your scripts if you ever modify your page as the image may no longer be in the same position in the collection. The purpose of ordinal access is when you want to enumerate over images. For example, to enumerate all the images on the page:

for (var i=0; i < document.images.length; i++)
  alert(document.images[i].src)

The second and third approaches above for accessing images are very similar. In general, if you know the name of the image in advance, you should use the second approach as it can yield the best performance. The third approach where we specified the name of the image as a string is more useful when accessing images based on the value in a variable. For example:

function DisplaySrcFor(sImageName) {
  alert(document.images[sImageName].src)
}

DisplaySrcFor("bookCover")

The DisplaySrcFor function displays the source of any image. More interesting than displaying the image source is changing it. The src property can also be assigned a new image path causing the image to be replaced. This is the basis for basic image rollover effects.

function ChangeSrc(sImageName,sPathName) {
  document.images[sImageName].src = sPathName
}

Image Attributes

Just like the src HTML attribute is exposed as a src property, many other HTML attributes are also accessible to scripting. However, with the exception of Internet Explorer 4.0, all the other attributes are only read-only. This means you can only read the values, and changing them either has no effect or causes a script error. Internet Explorer 4.0 and later allows any attribute to be changed and reflected in the browser.

For example, you can access the width and height HTML attributes through the width and height properties. These properties return the size of the image in pixels. The actual size is returned even if the size was not specified in advance. In addition to the width and height of the image, the additional HTML attributes are also reflected in the object model read-only by Netscape 3+ and read-write Internet Explorer 4+: border, hspace, vspace, and name. Internet Explorer takes the concept of exposing attributes to the full extreme by exposing every attribute on the IMG tag.

For the most part, the cross-browser read-only properties serve a limited purpose. For example, you can use this information to generate new documents on the client:

function ImageInfo() {
 var w = window.open()
 var d = w.document
 d.open()
 d.write("<TABLE><TR><TD>Image Source</TD>")
 d.write("<TD>Image Width</TD><TD>Image Height</TD></TR>")
 for (var i=0; i < document.images.length; i++) {
  d.write("<TR><TD>" + document.images[i].src + "</TD>")
  d.write("<TD>" + document.images[i].width + "</TD>")
  d.write("<TD>" + document.images[i].height + "</TD></TR>")
 }
 d.write("</TABLE>")
}

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.