6.2.2. Image Object

October 26, 2012 Javascript Tutorials

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>

Sign-up for our email newsletter and get free job alerts, current affairs and GK updates regularly.
Subscribe Here (or)

<< Previous

Next >>

6.2.2. Image Object

Related Posts:

Leave a Reply Cancel reply

Javascript Tutorials