Using JavaScript, you can create a lot of effects on the images on the site. In JavaScript, all images are represented in a matrix called images. This is a property (and sub-object) of the “document” object. For indexing in the array (or array), each image on a web page has a certain number (index). The first image has the number 0; the second image has the number 1 and so on. Thus, reference can be made to the first image using the expression “document.images [0]”. Each image in an HTML document is considered an Image object. An Image object has several properties that can be accessed by JavaScript. For example, you can see the dimensions of an image using the “width” and “height” properties.
The properties of the image object are as follows:
Border – can only be read and is the width of the border around the pixel specified
Other – Specifies the text to be displayed instead of the image (if it can not be viewed by the browser)
Align – where to place the image
Complete – it can only be read and is a boolean value that lets us know if the image has been fully downloaded.
Height – the pixel height of the image
Hspace – refers to the right and left space of the image (in pixels)
Lowsrc – Specifies a URL of an image to be displayed at low resolution
Name – is used to give an image name
Src – Specifies the URL (address and name) of the image
usemap – map label
Vspace – the space between the top and bottom of the image
Width – pixel width of the image
If you want to change the images on the page with JavaScript, use the src property.
As in the <img> tag, the “src” property represents the address of the displayed image.
With JavaScript, we can give a new address to the image to upload to the page, so the image from the new address will replace the old image.
Here’s an example where you can understand how to change this image:
<img name = “image” src = “img1.jpg” width = “155” height = “155”>
<Form>
<input type = “button” onClick = “document.imagine.src = ‘img2.jpg'” value = “Change image”>
</ Form>
– The image “img1.jpg” is loaded and takes the name “image”.
– With the code line “document.imagine.src = ‘img2.jpg’ replace the former” img1.jpg “image with a new image” img2.jpg “by clicking on the” Change Image “button.
– The new image will be displayed in the same place, the image display area remains the same.
Here’s another example where we have an HTML page with two links (links) that, through a JS script, change the display of multiple images in the same place. The images are declared and stored in a variable “pictures.” Two functions are used to change images: “gonext” and “goback”.
<Html>
<Head>
<Title> Title </ title>
<script type = “text / javascript”>
<! –
images = new Array (“img1.jpg”, “img2.jpg”, “img3.jpg”);
no = 0;
function goback () {
if (document.images && nr> 0) {
nr–;
document.imgs.src = image [No];
}
}
function ()
if (document.images && nr <(images.length – 1)) {
No ++;
document.imgs.src = image [No];
}
}
// ->
</ Script>
</ Head>
<Body>
<h4 align = center> Images <br>
<img src = “img / img1.jpg” name = “imgs” width = “155” height = “155”> <br>
<a href=”javascript:goback()”> << – Previous </ a> |
<a href=”javascript:gonext()”> Next – >> </a>
</ H4>
</ Body>
</ Html>
– A disadvantage of the scripts in these two examples is that after clicking on the “Change picture” or “Next” link button, displaying new images may be delayed because this must be loaded by the browser after pressing the (or link). In the next lesson you will learn how to avoid this by “preloading images“.