Working with Images
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 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
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 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:
alert(“line one Line two”);
o Load your page in the browser and view the results.