2

編集：与えられた最初の答えに基づいた私の解決策については、この質問の終わりを参照してください（私は緑色で「チェック」しました）。

この単純な静的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を指定してください。

アクティビティインジケーターはいい感じですが、2番目の画像のonLoadまたはonErrorの実行に依存するため、おそらくjavascriptでのみ使用できます。したがって、無視してください。スクリプトタグを使用してアクティビティインジケータを動的に挿入します。この例を単純にするために、表示されるスクリプトはonLoadタグとOnErrorタグのみです。

私が判断したいのは、htmlのみを使用してこの結果を達成する方法です。つまり、javascriptがオフになっている場合、見つからない画像を見つけることができる画像に置き換える別の方法です（つまり、眉をひそめていると仮定します）。画像は、それにリンクしているhtmlページと同じサーバー上にあるため、安全です。）

以下は、私がチェックした答えに基づいて作成したソリューションです。

<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>
4

1 に答える 1

2

たぶん、base64データURLを使用した背景画像のトリックが機能するでしょう。CSSを有効にしている場合、少なくとも、アイテムはbase64でエンコードされたデータによってのみCSSで定義された背景画像を持つことができ、ユーザーが画像をヒットできる場合（つまり、サービスがオンラインである場合）、サーバーから返された画像でオーバーレイされます。

したがって、CSSで定義された背景画像は、サービスがオンラインの場合は効果的に非表示になり、オフラインの場合は非表示になります。これは大まかに次のように行う必要があることに注意してください。

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

そしてCSSでは：

#service1Overlay { background-image: url('http://myservice.com/statuspic.png'); }
.status_test { background-image: url('<base64-data-url-goes-here>'); }
于 2011-07-31T04:28:25.673 に答える