Conditional images in a webpage

Sometimes in a web application you want different pictures to appear, depending on a condition. For many die hard programmers that will be a piece of cake, but for may others it isn’t.
Suppose you have an application that monitors if the level in your water tank is full or not completely full yet (say with a float switch) and you want a picture to appear that either shows a full tank, or a not so full tank. Your sensor sends either a ‘0’ or a ‘1’, depending on whether the switch is closed or open.
Say you get that state either via a json or a GET or a PUT. Just as example I presume it comes in via a json and it’s name is ‘level’

You start with some HTML that looks like this:

HTML

<!--Container for picture -->
<div>
Tank is <span id="tank"></span>
<p><img id='img' width="50"></p>
</div>

You then add some Javascript that looks like this:
JavaScript

var l=jsonData.level
if (l==1){
document.getElementById("tank").innerHTML="full";
var imageshown="/images/full.png"
}else{
document.getElementById("tank").innerHTML="not full";
var imageshown="/images/empty.png"
}
document.getElementById('img').src=imageshown

This is how it works:
The HTML basically says “Tank is …..” and then goes to show a picture with the ‘img’ tag. It is just that some parts still need to be filled in . The parts that need to fill in we have given an ‘id’ by which they can be recognized. Those id’s we have called ‘tank’ and ‘img’, but they could have had any other name.

Then in the Javascript we make use of the DOM programming interface. DOM stands for Document Object Model, it is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

We make use of ‘document.getElementById’ that is a method of accessing element in HTML. In this case, we use the id ‘tank’, that we have defined before in the HTML.
We then get or control the content of that object we just have identified, with ‘innerHTML’. In our case it means that we replace the identified element with either the text ‘full’ or ‘not full’.
Also, depending on the state of the ‘l’ variable, we define the ‘imageshown’ variable with the path of either the ‘full’ image, or the ’empty’ image. We then use the ‘document.getElementById’ method again to identify the ‘img’ object in the HTML and use innerHTML to replace it with the path to the appropriate image.

Obviously, one can add html tags to the replacement content: for instance:

document.getElementById('vijver').innerHTML="<span style='color:red'><i>not full</i></span>";

will make the text appear in red italic.

Mind you that depending on where you put the javascript, you may need to put <script> </script> tags around it (e.g. when it is directly in your HTML).

Advertisement