JavaScript Image Object

Image Object & its Properties

<img src=../images/top2.jpg alt='plus2net.com tutorial site'
 align='right' id=my_image border=2 height=30 width=150>

Using above image, we can create one image object like this.

var x=document.getElementById('my_image');

Using this object we can get these details. Use this code inside <body> tag.

<script language='JavaScript' type='text/JavaScript'>
<!--
var x=document.getElementById('my_image'); // create Image object
document.write('<br>Height:'+x.height);
document.write('<br>Width:'+x.width);
document.write('<br>naturalHeight:'+x.naturalHeight);
document.write('<br>naturalWidth:'+x.naturalWidth);
document.write('<br>Alt text:'+x.alt);
document.write('<br>Border:'+x.border);
document.write('<br>Align:'+x.align);
document.write('<br>offsetTop:'+x.offsetTop);
document.write('<br>offsetLeft:'+x.offsetLeft);
//-->
</script>

You can add two more lines to read the window height and width , this will change if you resize your window ( refresh to check )

document.writeln("<br>window.innerWidth = " + window.innerWidth );
document.writeln("<br>window.innerHeight = " + window.innerHeight );

Above lines can be triggered each time the window is resized by adding onresize() to body tag.

Property	Description
Align	Align image left or right
Border	managing image border
Alt	Alt Message of the image
Height	Reading or assigning height to the image
Width	Reading or assigning ( updating ) image width
naturalWidth	Actual Width of the Image
naturalHeight	Actual Height of the Image
Position	Positioning image by assigning left and top style
offset()	Reading the position of the image from left and top edge of the screen

Applications and Demo scripts using Image Object in JavaScript

Image SlideShow Script using navigational buttons

Image Loading to cache while page load by Image object

Reloading the image without refreshing the page

Image Rotator Script for automatic Slideshow

Image Move across by button click

Image Move continuously across screen

Subscribe to our YouTube Channel here

JavaScript image object

Image Object & its Properties

Subscribe