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”] [ALIGN “left”I “right”I “top” I “bottom” I “absmiddle” I “absbottom” I “texttop” I “middle” I “baseline”] [ISMAP] [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
<html>
<head>
<title>
Myscript
</title>
<script type = “text/JavaScript”>
Function loadit (theImage, form)
{
If(document.images)
{
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?”))
{
Location.reload()
}
}
</script>
</head>
</body>
<img src = “Image4.gif” width = 120 height = 90
onLoad = if (document.forms[0].result.value = ‘done’ onAbort = signal()>
<form>
<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>
</form>
</body>
</html>
Comments RSS Feed
Leave a Reply