JavaScript image object

plus2net.com tutorial site

  • 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
AlignAlign image left or right
Bordermanaging image border
AltAlt Message of the image
HeightReading or assigning height to the image
WidthReading or assigning ( updating ) image width
naturalWidthActual Width of the Image
naturalHeightActual Height of the Image
PositionPositioning 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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    More on JavaScript Image Object
    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
    Image offSetLeft and offSetTop to get position of the image from left and top
    Image Position : Positioning an image by assigning value to style.top and style.left
    Image width: Managing width of the image
    Image height: managing height of the image
    Image align: Image align left or right
    Image border: adding and removing border from Image
    Image alt: updating or reading alt message of image

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer