#tbt JavaScript and changing images

Years ago before all the fancy CSS and different cool HTML5 features we had to get creative with images and how to change them on the “fly”… granted I still remember when “blink” was added to HTML and celebrated when it was removed.

So I decided to see if I could remember some of that and play around a little bit. First step was to decide what to do and then the actual “how”. I figured why not replace a time or other number with my own images? First step let’s go a bit retro with some old school numbers. Grabbed my trusty GIMP and went to town.

Now that I had my numbers, I popped open my SAP HANA server jumped into the Workbench. There I started a XS application.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>#tbt JavaScript Images</title>
    <style>
    .digitalnum {
        width: 25px;
        background: #000000;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
    }
</style>
</head>

<body>
    <img id="hours1" src="/codejam/tbt/jsimage/images/0.png" class="digitalnum">
    <img id="hours2" src="/codejam/tbt/jsimage/images/0.png" class="digitalnum">
    <img id="mins1" src="/codejam/tbt/jsimage/images/0.png" class="digitalnum">
    <img id="mins2" src="/codejam/tbt/jsimage/images/0.png" class="digitalnum">
</body>
</html>

Granted this is not exactly “old school” but hey I don’t have to go too #tbt with it. Now it was time for the JavaScript to do the actual image changing.

For that I needed to first get the current time.

    <script>
        var d = new Date();
        var hr = d.getHours();
        var min = d.getMinutes();
        if (min < 10) {
            min = "0" + min;
        }
        console.log("hr : " + hr);
        console.log("min : " + min);
    </script>

Now to get my hours and minutes into individual digits.

        var lv_hrs = (""+hr).split("");
        console.log(lv_hrs);
        var lv_mins = (""+min).split("");
        console.log(lv_mins);

Now years ago we would have done something like this, instead of having the images in the HTML already.

document.write("<img src='/codejam/tbt/jsimage/images/"+lv_hrs[0]+".png'>");
document.write("<img src='/codejam/tbt/jsimage/images/"+lv_hrs[1]+".png'>");
document.write(" : "); 
document.write("<img src='/codejam/tbt/jsimage/images/"+lv_mins[0]+".png'>");
document.write("<img src='/codejam/tbt/jsimage/images/"+lv_mins[1]+".png'>");

Now though with the images in the HTML we can just access their elements and change them dynamically.

document.getElementById('hours1').src = "/codejam/tbt/jsimage/images/" + lv_hrs[0] + ".png";
document.getElementById('hours2').src = "/codejam/tbt/jsimage/images/" + lv_hrs[1] + ".png";
document.getElementById('mins1').src = "/codejam/tbt/jsimage/images/" + lv_mins[0] + ".png";
document.getElementById('mins2').src = "/codejam/tbt/jsimage/images/" + lv_mins[1] + ".png";

Or maybe you want to add more, like a status indicator based on time? So maybe a status indicator that warns you that you should be offline already?

    .digitalstatus {
        width: 25px;
        padding-bottom: 7px;
    }


<img id="status" src="images/green.png" class="digitalstatus">

        var lv_status = "green";
        if( hr >= 20 ){
            lv_status = "yellow";
        }
        if( hr >= 21 ){
            lv_status = "red";
        }
        console.log("Status: " + lv_status);
        document.getElementById('status').src = "/codejam/tbt/jsimage/images/" + lv_status + ".png";

Which at 20:00 I should be seeing yellow warning me that it’s almost time to get offline for the night?

So all well and good, but now what about it automatically keeping up? Nice little loop will do the trick.

setInterval(function () {
 ... existing code ...
}, 1000);

To see the effect I needed to add in the “seconds” to my time otherwise it’s just sitting there doing nothing. I removed some of the “output” statements and changed my status to check the minutes and go “red” and 40 mins after the hour.

So hopefully that was a fun little break for you, I enjoyed taking the break and dusting off some old skills…

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

#tbt JavaScript and changing images

Assigned Tags