Minimal server online status checker (HTML/JavaScript)
Starbuck, noooooo!
Above is an example of a nifty server status script I have been using in a recent project.
Here is the base code for monitoring a web server:
<img src="http://site-to-check.com/online.png" alt="status" onerror="this.src='files/offline.png'" />
The setup is:
- An online icon (online.png) on the remote server you want to see the status of.
- An offline icon (offline.png) on the server that is going to show the status page.
If the image on the remote server fails to load, the onerror event is triggered and the javascript rewrites the image tag to show the offline image. You can use relative or absolute paths for the offline image. This snippet is fully compatible with all major browsers, including Internet Explorer down to version 5.5!
Demo
Click here for a demo.
Resources
Below are the images I use, found on Clker, an excellent online clipart resource.
Online
Offline
Participate
If you find this useful or have any suggestions for improving it, feel free to write in the comments!
Tags: css, demo resources, html, image demo, image tag, javascript, offline image, onerror event, online, server, server status, status, web development
You can comment below, or link to this permanent URL from your own site.
Living with technology 
09/02/2012 at 14:57
And if you want statistics on that as well?
09/02/2012 at 15:26
Then you’re probably looking for a full-fledged monitoring service like Pingdom and not a script that is literally 11 characters long. 🙂
09/02/2012 at 20:12
Correct answear is:
Where offline.php serves up:
Easy fix 😉
The code now allows to register how many times a website has been down when a user has requested it.
09/02/2012 at 20:13
Comments removes code…
Jesus!
09/02/2012 at 20:14
<?php$im = imagecreatefrompng("test.png");header('Content-Type: image/png');imagepng($im);imagedestroy($im);?>
09/02/2012 at 20:16
Correct answear is:
<img src="http://site-to-check.com/online.png" alt="status" onerror="this.src='files/offline.php'" />
Where offline.php serves up:
<?php//Code to register website down count//Serve up image$im = imagecreatefrompng("offline.png");header('Content-Type: image/png');imagepng($im);imagedestroy($im);?>
Easy fix! 😉
The code now allows to register how many times a website has been down when a user has requested it.
09/02/2012 at 21:28
Hi!
Posting code in comments isn’t easy on WordPress.com – Pastebin is a good resource for this.
There are’s some basic problems with your suggestion:
First – the snippet is PHP, a server-based technology which has prequisites on the hosting environment.
Second – it doesn’t actually register anything, as you provide no code for it, just a shell for serving up an image via PHP.
Third – You can get this information from your web server logs without any additional code, should you need it. Generally though, you’re not interested in how many people couldn’t access your site, but rather how long it has been down.
09/02/2012 at 22:52
Response:
First – Yes, it would indeed require prequisites. I can’t come to think of a way that would not need prequisites.
Second – I left that blank so that the implementer could specify their prefered way of registering it. Just plain text output to a local file, database insertation or E-mail to name a few of the alternatives.
Third – How would you achieve to see when a remote server is down through local serverlogs? If you mean by checking the amount of offline.png requests there are that is true. Although since you brought up prequisites the website has to be set up to monitor that. A common tendency on default setups is to remove old logs.
I do agree that the frequency and duration of actual downtime is more interesting than the amount of users that could not access a resource – hence my outbreak!
13/05/2014 at 18:12
Thank you, kind man!
This quick’n’simple approach is something that I’m looking for!
15/04/2017 at 06:59
And now we have CDN which render this hard.
02/07/2017 at 01:14
What’s Going down i’m new to this, I stumbled upon this I’ve found It absolutely useful
and it has helped me out loads. I’m hoping to contribute & assist different customers like its helped me.
Good job.
07/11/2017 at 11:10
Anyone care to share the HTML code for this also please?