Image : img « HTML Tags « JavaScript Tutorial





The Image object represents an image that was created with the tag.

Images can be downloaded and cached dynamically by using the Image() constructor.

Images cannot be displayed using the constructor.

The constructor takes two optional arguments, width and height.

width specifies the width of the image in pixels.

height specifies the height of the image in pixels.

If these arguments are larger or smaller than the actual image, the image will be stretched to these dimensions.

The image to load is specified using dot notation and the src property.

Properties/Methods/EventsDescription
borderWidth of border around image
completeHas image finished loading?
heightHeight of image
hspacePadding on left and right of image.
lowsrcAlternate image for low-resolution displays
nameName of image
srcURL of image
vspacePadding on top and bottom of image
widthWidth of image
handleEvent()Invokes an images event handler
onAbortHandler when image load is aborted
onErrorHandler when error occurs while loading image
onKeyDownHandler for KeyDown events within image
onKeyPressHandler for KeyPress events within image
onKeyUpHandler for KeyUp events within image
onLoadHandler when image is finished loading


<html>
    <head>
    <title>Example of Image Object</title>
    <script language="JavaScript">
    <!--
    alternate=0;
    
    circle = "circle.gif";
    square = "square.gif";

    function changeImage(){
      if(alternate==0) {
        document.magic.src=circle;
        alternate=1;
      } else {
        document.magic.src=square;
        alternate=0;
      }
    }
    -->
    </script>    
    </head>

    <center>
    <form>
    <input type="button"
           value="Change Image"
           onClick="changeImage()">
    </form>
    <img name="magic" src="http://www.java2s.com/style/logo.png">
    </center>
    </html>










21.9.img
21.9.1.Image
21.9.2.Image.border
21.9.3.Image.complete
21.9.4.Image.height
21.9.5.Image.hspace
21.9.6.Image.lowsrc
21.9.7.Image.name
21.9.8.Image.src
21.9.9.Image.vspace
21.9.10.Image.width
21.9.11.Change link image in mouse in and mouse out
21.9.12.Change image align
21.9.13.Change image title
21.9.14.Image substitute
21.9.15.Image load onerror event (IE)
21.9.16.Add onerror handler to image element within document element array (IE)
21.9.17.Replace an Image under mouse event (onMouseOver, onMouseOut)
21.9.18.Slide Show
21.9.19.Change vspace for image