Hola,

Hay un truco muy sencillo que en una linea básicamente te permitiría saber si te has quedado sin Internet o no xD. Se trata de poner una imagen externa (logo de google por ejemplo) y agregar onerror para que en caso de que no pueda cargarse salte.

El ejemplo:

<img src='https://www.google.com/logos/classicplus.png' onerror='SinInternet();'  style="display:none;" />

Así, si el logo de google no se consigue cargar, saltara la función javascript "SinInternet();". Por supuesto le añado display:none; para que no se muestre en caso de que se cargue o para que el navegador no ponga una de sus imágenes rotas.

Luego con Ajax (javascript) puedes llamar un archivo en tu ordenador.
Ejemplo:

<script type="text/javascript">
var SinInternet = function(){
   // abrimos XMLHttpRequest
   var client = new XMLHttpRequest();
   // Buscamos el archivo "Sininternet.html"
   client.open('GET', 'Sininternet.html');
   // Cuando este listo..
   client.onreadystatechange = function() {
      // Obtenemos el elemento con id "contenido"
      var contenido = document.getElementById('contenido');
      // ponemos la respuesta en el elemento.
      contenido.innerHTML=client.responseText;
   }
   // Enviamos peticion.
   client.send();
}
</script>

Espero que te sirva.

PD: Ten en cuenta que según recuerdo onerror no es valido para la W3C por tanto no se considera un atributo valido para la HTML4 ni XHTML.

Saludos