Замена отсутствующего изображения с использованием чистого HTML (у меня есть рабочий пример javascript / css, я хочу сделать пуленепробиваемый для браузеров, которые отключают js) - PullRequest
Новая
       28

Замена отсутствующего изображения с использованием чистого HTML (у меня есть рабочий пример javascript / css, я хочу сделать пуленепробиваемый для браузеров, которые отключают js)

2 голосов
/ 31 июля 2011

РЕДАКТИРОВАТЬ: см. Конец этого вопроса для моего решения на основе первого ответа (который я "пометил" зеленым цветом).

Takeвзгляните на эту простую статическую 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-страницу, вы должны кратко увидеть индикатор активности, затем вы должны увидеть улыбающееся лицо.

если вы измените тег src второго объекта img, либо на другое доменное имяили ip-адрес, который вы знаете, мертв, в конце концов индикатор активности должен прекратиться и заменить его нахмурившимся лицом.

примечание - в этом примере редактирование имени файла не будет работать, так как обслуживающий его сервер игнорирует конечный компонент пути, поэтому, пожалуйста, просто отредактируйте сервер и укажите неверное доменное имя или что-то вроде 127.0.0.9

индикатор активности приятен, но, вероятно, будет доступен только с javascript, так как он зависит от выполнения onLoad или onError второго изображения.поэтому, пожалуйста, не обращайте на это внимания - я просто вставляю индикатор активности, используя тег script, динамически.чтобы этот пример был простым, единственный сценарий, который вы видите, находится в тегах onLoad и OnError.

Я хотел бы определить, каким-то образом можно достичь этого результата, используя только html - т.е. в случае превращения javascriptoff, какой-то альтернативный способ замены изображения, которое не может быть найдено, на то, которое можно (например, предположим, что недовольное изображение будет безопасным, поскольку оно находится на том же сервере, что и 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>

1 Ответ

2 голосов
/ 31 июля 2011

Может быть, сработает фоновое изображение с использованием URL-адресов данных base64. Идея заключается в том, что если у вас включен CSS, то, по крайней мере, у элемента может быть фоновое изображение, определенное в CSS только с помощью данных, закодированных в base64, а затем, если пользователь сможет нажать на изображение (т. Е. Служба подключена), он будет быть наложенным на изображение, возвращаемое сервером.

Таким образом, фоновое изображение, определенное в 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>'); }
...