Missing Image Replacement using Pure HTML (i have working javascript/css example i wish to make bulletproof for browsers that turn js off)_问答_开发者

EDIT: See the end of this question for my solution based on the first answer given (which I have "ticked" in green).

Take at look at this simple static html page:

(these are just images i found using google image search, to explain the question. apologies if any of these images are subject to copyright. i just needed images on live servers...)

<html>
<head><title>Server Test Using Image</title>
<head>  
<body>
If the server is alive, I will be a happy browser<br>
<img src="http://getsetgames.com/wp-content/uploads/2009/12/ActivityIndicator.gif" id=spinner width=100 height=100> 
<img 
 src="http://pwhatley.files.wordpress.com/2008/06/walmartfrown.jpg" 
 width=100 height=100 
 style="display: none;" 
 id=linkBad
>
<img 
 src="http://3.bp.blogspot.com/-vpsc13PCfc0/TaLCGaq2SjI/AAAAAAAACTA/hw2MDzTk6mg/s1600/smiley-face.jpg" style="display: none;" width=100 height=100 
 onError="document.getElementById('linkBad').style.display='inline'; document.getElementById('spinner').style.display='none';"
 onLoad="this.style.display='inline'; document.getElementById('linkBad').style.display='none'; document.getElementById('spinner').style.display='none';"
>
</body>
</html>

i have coded the above example using an excerpt of a larger project I am working on that assesses the online state of a number of servers. whilst this content is produced dynamically, for the purposes of this example you can assume it's a static page that is loaded by a browser开发者_如何学Python. (ie assume there is no way of doing these things at the server back end, as the goal of the site is to inform the viewer of what servers he/she can "reach" from that location)

if you cut and paste this in to an html page, you should briefly see an activity indicator, then you should see a smiling face.

if you edit the src tag of the second img object, to either a different domain name, or an ip address you know is dead, eventually the activity indicator should stop, and be replaced with a frowning face.

note - in this example, editing the file name will not work, as the server that serves it ignores the final path component, so please just edit the server and point it to a bad domain name or something like 127.0.0.9

the activity indicator is a nice touch, but probably will only be available with javascript, as it's dependant on the second image's onLoad or onError executing. so please ignore that - i'd just insert the activity indicator using a script tag dynamically. to keep this example simple, the only scripting you see is in the onLoad and OnError tags.

what I would like to determine is some way of achieving this result using only html - i.e. in the event of javascript being turned off, some alternative way of replacing an image that can't be found with one that can, (i.e. assume the frowning image would be safe because it's on the same server as the html page that linked to it.)

Following is the solution I have created based on the answer i have ticked.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.serviceFails {
background-image: url('http://img185.imageshack.us/img185/1800/080508215859259007ge8.jpg');
}
.service1 {
background-image: url('http://img204.imageshack.us/img204/3783/080508190940132007ve6.jpg');
}
.service2 {
background-image: url('http://img206.imageshack.us/img206/2967/080508153147264007sp6.jpg');
}
/* ... */
-->
</style>
</head>
<body>
<table><tr><td>Service 1</td><td>
<div class="serviceFails">
<div class="service1"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>
<br>    
<table><tr><td>Service 2</td><td>
<div class="serviceFails">
<div class="service2"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>    

</body>
</html>

Maybe background-image trickery using base64 data URL's will work. The idea being that if you have CSS enabled, at least, an item could have a background image defined in CSS only by means of base64 encoded data and then if the user is able to hit the image (i.e. the service is online) it will be overlaid with the image returned by the server.

So the background image defined in CSS will be effectively hidden from view if the service is online, if it is offline then not. Note that this should be done roughly like so:

<div class="status_test">
  <div id="service1Overlay"></div>
</div>

And in CSS:

#service1Overlay { background-image: url('http://myservice.com/statuspic.png'); }
.status_test { background-image: url('<base64-data-url-goes-here>'); }