Un par de métodos más.
Aunque da un poco de trabajo, es posible hacer 2 hojas de estilo diferentes (una en 'colores' y la otra 'escala de grises') y cambiarlas con un escript. Las imágenes también se pueden cambiar, pero hay que hacer 2 juegos y precargarlas.
Que usuario cambie color dominante de la web
Encontré en Diseñorama un enlace interesante. No lo estudié, pero creo que toma el código fuente del documento y hace los cálculos de la misma forma que el
bookmarklet que puse arriba, pero convirtiendo a
rgb() para que funcione en todos los navegadoes; las imágenes las debe modificar con PHP y luego reescribe las rutas hacia las nuevas que pone en el servidor.
Simulador de daltonismo (Colorblind Web Page Filter)
Todo esto es para "deshablitar" el documento, y una forma evidente de hacerlo es
Código:
<body disabled="disabled" style="background:InactiveCaption">
pero funciona unicamente en
Internet Explorer y no sé cómo
switchearlo con javascript.
Otro método sería cubrir el documento con una capa semitransparente del mismo color que el fondo, con lo que el contenido parece virar a ese color (y hasta desdibujarse) y ya no se lo puede activar.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>DESHABILITABLE. </title>
<style type='text/css'>
body{overflow:auto; color:#ff0; background-color:#000}
p {color:#fff}
#tapa {position:absolute; z-index:100; top:0; left:0; background:url("http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif") transparent; }
</style>
<script type="text/javascript">
function deshabilitar(){
var deshabilitado = confirm("¿Quiere deshabilitar el documento?.");
if(deshabilitado){
document.body.style.overflow = "hidden";
document.body.style.overflow = "hidden";
var altura = document.body.scrollHeight;
var anchura = document.body.scrollWidth;
document.getElementById("tapa").style.height = altura+"px";
document.getElementById("tapa").style.width = anchura+"px";
}
}
</script>
</head>
<body style="overflow:auto">
<h1>Documento que se deshabilita.</h1>
<p>Click en el enlace "Deshablitar" para cubrir el documento con una capa semitransparente del mismo color que el fondo.</p>
<h2>qwertyuiop</h2>
<h2><a href="javascript:deshabilitar()">Deshabiliar</a></h2>
<img src=
"http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif"><br>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<div style="height:500px; background:yellow; width:50px"></div>
<h2 style="text-align:center">Imagen :<br>
<img src="http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif" style="background:#fff; margin:20px;"></h2>
<div id="tapa"></div>
</body>
</html>
La imagen es
