JavaScript image height

We can assign or read the height of the image by JavaScript image object properties. We will use getElementById to manage our image.

Let us start with reading the height of an image
var y=document.getElementById("i1").height;
Here i1 is the image object.

Assigning height to an image

document.getElementById("i1").height=100;
We have assigned 100 to the hieght of the object Here is the code.
<html>
<head>
<title>Demo of changing height of an Image in JavaScript</title>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
<script language='JavaScript' type='text/JavaScript'>
<!--
function resize_img(st) {
var x=document.getElementById("i1").height;
if(st=='up'){
if(x<300){
x=x*2;
}
}else{
if(x>5){
x=x/2;
}
}
document.getElementById("i1").width=10;
document.getElementById("i1").height=x;
}
//-->
</script>
</head>
<body>
<input type=button onClick=resize_img('up') value='Expand'>
<input type=button onClick=resize_img('down') value='Compress'>
<br><br><br>
<img src=images/help.jpg id='i1'>
<br><br>

</body>
</html>


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-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer