change the size of an image
It is entirely possible to change the size of an image. You may apply the changes to the same image or download a new image and display that, resized. We use the getElementById() method to access the data associated with that image, in this case the image dimensions. The browser can be made to display an image in dimensions that aren’t the actual size of the image. Because of this, it is possible to change the image dimensions dynamically.
<html>
<head>
<script type="text/javascript">
function moveover() {
document.getElementById('image').width="200";
document.getElementById('image').height="360";
}
function moveback() {
document.getElementById('image').width="100";
document.getElementById('image').height="180";
}
</script>
</head>
<body>
<b>Mouse over the image:</b><br />
<img id="image" src="bulbon.gif" onmouseover="moveover()" onmouseout="moveback()">
</body>
</html>
A few things have to be considered if you’re going to resize images. The first is simple page layout. If you use a table that contains the image to be resized, you’d alter the entire table upon the resize. Most of the time this isn’t what you want, so it is sometimes prudent to account for the new image dimensions. Within the TD tag of the table, state the size of the TD area as the size of the largest image dimension. This way the table isn’t altered with an oversized image and the page looks as you intended.
|
