使用纯 HTML 替换缺失图像（我有有效的 javascript/css 示例，我希望为关闭 js 的浏览器提供防弹功能）

发布于 2024-11-27 04:25:26 字数 3069 浏览 7 评论 0原文

编辑：根据给出的第一个答案（我已用绿色“勾选”），请参阅此问题的结尾以获取我的解决方案。

看看这个简单的静态 html 页面：

（这些只是我使用谷歌图像搜索找到的图像，以解释问题。如果这些图像中的任何一个受版权保护，我深表歉意。我只需要实时服务器上的图像......）

<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 页面中，您应该会短暂地看到一个活动指示器，然后您应该看到一张笑脸。

如果您将第二个 img 对象的 src 标签编辑为不同的域名或您知道已失效的 IP 地址，最终活动指示器应该停止，并替换为皱眉的脸。

注意 - 在此示例中，编辑文件名将不起作用，因为为其提供服务的服务器会忽略最终路径部分，因此请仅编辑服务器并将其指向错误的域名或类似 127.0.0.9 的名称，

活动指示器为一个很好的接触，但可能只能通过 JavaScript 来使用，因为它依赖于第二个图像的 onLoad 或 onError 执行。所以请忽略这一点 - 我只是使用脚本标记动态插入活动指示器。为了使这个示例简单，您看到的唯一脚本位于 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>

原文

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. (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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狼性发作 2024-12-04 04:25:27

也许使用 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>'); }

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>'); }

回复收藏 0 原文

~没有更多了~