fix for Loading an Image Using JavaScript

If you want to load an image using javascript then below script would be useful.

JavaScript is a two-step process:

 1. Create an Image object and assign it to a variable:

 var myImage = new Image;

2. Assign a source image URL to the src attribute of the object:

 myImage.src = “image URL goes here”;

The following task illustrates the programmatic loading of an image by loading

an image in this way and then providing links to display the height and width of

1. Create a script block with opening and closing script tags.

 2. In the script, create a new Image object named myImage:

 myImage = new Image;

 3. Load the image by assigning its URL to the src attribute of

myImage.src = image1.jpg;

4. In the body of the page’s HTML, include a link for displaying the

width and add an onClick event handler to the tag; this eventhandler will use the

window.alert method to display the image’s

width in a dialog box. The image’s width is obtained by referring to


<a href=#” onClick=window.alert(document.myImage.width)Æ


5. Include a link for displaying the height, and add an onClick event

handler to the tag; this event handler will use the window.alert

method to display the image’s height in a dialog box. The image’s

width is obtained by referring to document.myImage.height. The

final page should look like the following:

<script language=JavaScript”>

myImage = new Image;

myImage.src = Tellers1.jpg;



<a href=#” onClick=window.alert(myImage.width)


<a href=#” onClick=window.alert(myImage.height)




I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *