EDIT（私はJSをオフにブラウザの防弾をしたいのJavaScript/CSSの例を働いています）私は緑色で "刻まれた"）。不足している画像の交換は
この単純な静的なHTMLページを見に行ってください。。。
これらの画像のいずれかが、著作権の対象となっている場合（これらは、私は疑問を説明するために、Googleのイメージ検索を使用した画像だけ謝罪している私はちょうど私はそれに取り組んでいます大規模プロジェクトの抜粋を使用して上記の例をコード化している
<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>
ライブサーバー上で必要な画像が...）サーバの数のオンライン状態を評価します。このコンテンツは動的に生成されますが、この例では、ブラウザによって読み込まれる静的なページと見なすことができます。 （つまり、サーバのバックエンドでこれらの作業を行う方法がないと仮定します。サイトの目的は、その場所からどのサーバに到達できるかを視聴者に知らせることです）
これをhtmlページに貼り付けると、アクティビティインジケータが短く表示され、笑顔が表示されます。
2つ目のimgオブジェクトのsrcタグを編集して別のドメイン名にするか、死んでいることがわかっているIPアドレスに移動すると、最終的にアクティビティインジケータが停止し、擬似顔に置き換えられます。
注 - この例では、ファイル名の編集は機能しません。サーバーを提供するサーバーは最終パスコンポーネントを無視するため、サーバーを編集して127.0.0.9などの悪いドメイン名を指すようにしてください
アクティビティインジケータは素敵ですが、おそらくjavascriptでのみ使用できます。これは、2番目の画像のonLoadまたはonErrorの実行に依存しているためです。だから無視してください - 私はちょうど動的にスクリプトタグを使用して活動インジケータを挿入します。この例をシンプルにするために、表示される唯一のスクリプトはonLoadタグとOnErrorタグです。
私はこの結果をHTMLのみで達成する方法をいくつか考えています。つまり、JavaScriptがオフになっている場合は、画像を置き換える代替方法があります。すなわち、それはそれにリンクされているHTMLページと同じサーバー上にあるので、眉をひそめる画像が安全だろうと仮定します。）
後、私は私がチェックされている回答に基づいて作成したソリューションです。 base64のデータのURLの意志の仕事を使用して
<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>
ノート画像アイコン（MSIEで赤いX）をロードできませんでしたtransparent.gifファイルが読み込まれない場合そのため、私のCSSでは、サーバが稼働しているかどうかテストするためにバックグラウンドイメージプロパティを使用していました。ブラウザが失敗した場合、ブラウザはCSS仕様に従ってバックグラウンドイメージルールを無視する必要があります。私の知る限り。 – user268396
フェアコメント。これは私が使用する解決策の一例に過ぎません。実際には、htmlが提供されているのと同じサーバーから透過的で失敗するイメージを提供します。 – unsynchronized
imgのエラー構文を私の注意を引くための完全なマーク：これにより、私は非常に簡潔な解決策を実際に書くことができました。
（これにはJSを有効にする必要があります） –