o        In HTML, we can identify specific elements on the page using an id attribute. For example, to “name” an image, we can use the following code:

               <img src=”logo.gif” alt=”” id=”theLogo” />

o   To refer to this element in JavaScript, we can now get to it directly by its id value:


o       This method will return an object that refers to the given element on the page. If no such element can be found, the method will return false.

o        For easier use, we can assign the object found to a variable. For example, to create an object called our_logo in our scripts, we can use the following line of code:

      our_logo = document.getElementById(“theLogo”);

o      The resultant object has a number of properties. Since, in this case, our object represents an image element, its properties include:

     our_logo.height our_logo.width our_logo.src

o      We can use JavaScript to change any of these properties, so if we wanted to change the image displayed, we could do so as follows:

     our_logo.src = “new_logo.gif”;


o      Copy the folder called images from the network drive to your project folder.

o   Open your previous project file, and save it under the name chapter_22.html.

o   Clear all JavaScript code from your script tags.

o      Ensure that you have a script element in the head area of your document, and none in the body area.

o      Within the body area of your page, create an image element that loads an image from the images folder. Give the element an appropriate id attribute.

o       In the head area script element, define a function called describe_image() that will pop up an alert box containing the following information about your image:

         the image file used

        the image width

        the image height

o      To have each bit of text appear on a separate line, you can add the following character to your alert text:

   for example

   alert(“line one Line two”);

o    Load your page in the browser and view the results.