Learning Outcomes
On completion of this lesson you will know how to interactively increase or decrease the opacity of an image.
Go to topFading Images
Introduction
This page is a short and easy roundup of our exploration of JavaScript. The viewer is simply presented with an image and two buttons: one to increase the brightness of the image and another to reduce it to invisibility or zero opacity.
Although the three components of a web page, i.e. HTML, CSS and JavaScript were short enough in this case to be put into a single file, we still adhered to our custom of keeping them all separate from each other, thus give very short code listings.
Go to topOpacity
Before examining our code we shall first give a short explanation of what exactly we mean by 'Opacity' as far as images are concerned. An image shown in full colour has an opacity of 1 while an image that is totally transparent has an opacity of zero.
Our code examples in this page will result in a web page where we can use two buttons to vary the opacity of an image between 1 and zero.
.buttonSytle{
width:90px;
display:inline;
}
.otherDivStyle{
display:block;
width:250px;
margin-left:auto;
margin-right:auto;
}
.mainDivStyle{
background-color:#444;
display:block;
padding-bottom:40px
}
.imageStyle{
display:block;
margin:40px auto 20px auto;
width:40%;
}
h1{
text-align: center;
color: beige;
}
The above CSS code lays out our very simple page.
For the main <div> it creates a dark grey background. For the second <div> it centers it and gives it a width of 250 pixels.
For the image it centers it and assigns a width of 40% of its container.
<!DOCTYPE html >
<html lang="en">
<head>
<title>Opacity Test</title>
<link href="Fading%20Images.css" rel="stylesheet" type="text/css">
<script src="Fading%20Images.js" type="text/javascript"></script>
</head>
<body>
<div class="mainDivStyle">
<h1 >Fading image</h1>
<img id="picture" src="Central 3 Framed.png" class="imageStyle"/>
<div class="otherDivStyle">
<img src="Decrease.png" class="buttonSytle" onclick='changeOpacity(-0.1)'/>
<img src="Increase.png" class="buttonSytle" onclick='changeOpacity(0.1)'/>
</div>
</div>
<script type="text/javascript">
sngCurrentOpacity=0.5;
document.getElementById("picture").style.opacity=sngCurrentOpacity;
</script>
</body>
</html>
Listing 2 above should be explained alongside Fig 1 since since the latter is a wireframe design for the HTML code.
The <body> block spans lines 8 to 21 of Listing 2 and is represented in Fig 1 as the white perimeter. Within the <body> are two <div> elements.
The first <div> spans lines 9 to 16. It contains the main heading at line 10, an image at line 11 and the second <div> spanning lines 12 to 15.
Inside the second <div>, at lines 13 and 14 are two buttons Both buttons have an onclick property. Both buttons call the same function, changeOpacity() but one calls it with a negative parameter and the other with a positive parameter.
We shall talk more about those buttons when we examine the JavaScript code below.
function changeOpacity(par)
{
sngCurrentOpacity+=par;
if(sngCurrentOpacity > 1)
sngCurrentOpacity=1;
else
if(sngCurrentOpacity < 0)
sngCurrentOpacity=0;
document.getElementById("picture").style.opacity=sngCurrentOpacity;
}
In JavaScript the property opacity varies between zero and 1. If an image has an opacity of zero then it is not visible, while an image with an opacity of 1 is totally visible
In lines 18 and 19 of Listing 2 the opacity of the image is set to 0.5, which means that the image is visible but the background can be see through it.
Now let us look at changeOpacity() in some detail. Its entire use is ensuring that the variable sngCurrentOpacity stays within the values 0 and 1 and can move freely between those two lmits.
The function has a parameter par which is passed to it from either line 13 or line 14 of Listing 2. If it is passed from Line 13 then the parameter is negative and thus it will reduce the value of sngCurrentOpacity when added to it at line 3. If it is passed from line 14 then it will be positive and therefore will increase the value of sngCurrentOpacity when added to it at line 3.
Once sngCurrentOpacity has been updated at line 3, lines 4 to 8 are devoted to ensuring that it does not go above 1 or below zero. At lines 4 and 5 it is tested for being above 1. If this is the case then it is reset back to 1. Similarly at lines 7 and 8, if it is below zero then at line 8 it is reset back to zero.
At line 9 the opacity of the image is set to the current value of sngCurrentOpacity.
You can test the application below.
Go to top