6.2.2. Image Object

Java Script provides image object which allows the developers to dynamically change the object as well as its width and height.

An image can be incorporated into an HTML document  using the following tag:

<IMG SRC = “ImageURL”
[LOWSRC = “LowResImgURL”]
[NAME = “ImageName”]
[WIDTH = “Pixels” I “PercentValue”]
[HEIGHT =”Pixels” I “PercentValue”]
[HSPACE = “Pixels”]
[VSPACE = “Pixels”]
[BORDER = “Pixels”]
“left”I “right”I “top” I “bottom” I “absmiddle” I “absbottom” I “texttop” I “middle” I “baseline”]
[USEMAP = “# AreaMapName”]
[onLoad = “JavaScriptCode”]
[onAbort = “JavaScriptCode”]
[onError = “JavaScriptCode”]

Consider the following statements:

Document.image [0].width =300
Document.image [0].height = 350

         In the document, images are referred by the array image[0], image[1]…….. image[n].  The above statements change the size image[0] into width = 300 and height = 350.  If the images are given some names, than the name can be used in place of images[0].

For example, consider the following line of code;

<Img src = “bdulogo.gif” width = “100” height = “200”>
This image is loaded from the file logo.  So, in a  Java Script program, this image can be referred as document.image [0],  The following statements  can be used to change the width and height  to 300 and 350 respectively.
Document.image[0].width = 300
Document.image[0].height = 300

To dynamically load a different picture, we can write

document.image[0].src = “newlogo.gif”

Example 6.2 = Using the image object

<script type = “text/JavaScript”>
Function loadit (theImage, form)
Form.reset.value =” “
Document.image[0].lowsrc = “logo –sm.gif”
Document.images[0].src = theImage
Function checkload(form)
If (document.image)
Form.result.value = document.images[0].complete
Function signal ()
If(confirm (“ you have stopped the image from loading.  Do you want to try again?”))
<img             src = “Image4.gif”                       width = 120                    height = 90
onLoad = if (document.forms[0].result.value = ‘done’ onAbort = signal()>
<Input      type=button           value= “load       keyboard”           onClick = loadit (“hand=sml.gig”,
this.form )>
<Input type = “button” value = “load lilies” onClick = loadit (“Image4.gif”, this.form)>
<Input type = “button” value = “is it loaded?” onClick = checkload (this.form)>
<Input type = “text” value = result>

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Get Alert

    Enter your email address:

  • Categories