Image : img « HTML Tags « JavaScript Tutorial

Home
JavaScript Tutorial
1.Language Basics
2.Operators
3.Statement
4.Development
5.Number Data Type
6.String
7.Function
8.Global
9.Math
10.Form
11.Array
12.Date
13.Dialogs
14.Document
15.Event
16.Location
17.Navigator
18.Screen
19.Window
20.History
21.HTML Tags
22.Style
23.DOM Node
24.Drag Drop
25.Object Oriented
26.Regular Expressions
27.XML
28.GUI Components
29.Dojo toolkit
30.jQuery
31.Animation
32.MS JScript
JavaScript Tutorial » HTML Tags » img 
21.9.1.Image

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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.