Image

Image : img : HTML Tags JAVASCRIPT TUTORIALS

JAVASCRIPT TUTORIALS » HTML Tags » img »

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/Events	Description
border	Width of border around image
complete	Has image finished loading?
height	Height of image
hspace	Padding on left and right of image.
lowsrc	Alternate image for low-resolution displays
name	Name of image
src	URL of image
vspace	Padding on top and bottom of image
width	Width of image
handleEvent()	Invokes an images event handler
onAbort	Handler when image load is aborted
onError	Handler when error occurs while loading image
onKeyDown	Handler for KeyDown events within image
onKeyPress	Handler for KeyPress events within image
onKeyUp	Handler for KeyUp events within image
onLoad	Handler 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.navioo.com/style/logo.png">
    </center>
    </html>