К нужным переключаемым элементам добавлям класс .OfflineShow или .OfflineHide
Переключатель режимов Онлайн - Оффлайн для классов .OfflineShow и .OfflineHide
<!DOCTYPE">
<head>
<style>
#foo {
width:300px;
height:100px;
border:red 1px solid;
}
#html-footer {
width:300px;
height:100px;
border:blue 1px solid;
display:none;
}
#Onl {
width:0;
position:absolute;
z-index:-1;
}
</style>
</head>
<body>
<style id="On_Off"></style>
<div id="foo" class="OfflineHide">Текст скрываемый при Offline</div>
<div id="html-footer" class="OfflineShow">Текст показываемый при Offline</div>
<img id="Onl" src="" alt="http://test083tst.mybb.ru/i/blank.gif" onload="FuncD()"/>
<!-- //(файл http://test083tst.mybb.ru/i/blank.gif - 43 байта,
перезаливаете на свой ресурc и меняете ссылку в alt -->
<script type="text/javascript">
//
(function () {
var offlineStyle='.OfflineShow {display:block!important;}.OfflineHide{display:none!important;}'
var timerCnt=0,styleELem
function SetSrc() {
var a=document.getElementById('Onl');
a.src=a.alt+'?=wr'+new Date().getTime();
} SetSrc()
setInterval( function () {
styleELem = document.getElementById('On_Off');
if(timerCnt > 0){styleELem.innerHTML='';}
else {styleELem.innerHTML=offlineStyle;}
timerCnt=0; SetSrc();
},7000); //7000 - критическое время данного запроса
return FuncD = function(){timerCnt++;setTimeout(function(){SetSrc()},2000);}
}())
</script>
</body>
</html>