Desvanecer colores

[gcordoba]

Disculpen como puedo hacer la animacion ( si asi se llama ) de desvanecer colores que hacen ustedes en este foro cuando un usuario le da CERRAR SESION ( todo se queda en blanco y negro )....


Gracias...

Saludos...

Gicel...

[moNTeZIon]

Buena pregunta, tsmbién me interesa mucho.

He intentado acceder a los ficheros JS donde estará codificado, pero están incomprensibles. Parece que estas leyendo una DLL compilada. También me interesa saber cómo es posible darle esa especie de encriptacion al fichero JS para que otros no puedan acceder al código.

Gracias!

[JavierB]

Hola gcordoba y moNTeZIon

Yo no veo ningún código incomprensible ni encriptado. De hecho esta es la función que hace el efecto de cerrar sesión (solo funciona en IE)

Código PHP:

  <script type="text/javascript"> 
<!-- 
function log_out() 
{ 
    ht = document.getElementsByTagName("html"); 
    ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; 
    if (confirm('¿En verdad quieres finalizar tu sesión?\n\nsi es así, presiona OK si no,\nentonces  presiona el botón CANCEL')) 
    { 
        return true; 
    } 
    else 
    { 
        ht[0].style.filter = ""; 
        return false; 
    } 
} 
//--> 
</script>  
  

Saludos,

[moNTeZIon]

Hola JavierB,
Muchas gracias por el codigo...

Lo del codigo incomprensible lo decia por el fichero vbulletin_global.js que está linkado en esta misma página. Lo descargué y lo abrí con el bloc de notas, pero tienes razón, no lo miré muy bien. Lo que ocurrió es que estaba viendo todo el codigo a lo ancho y me pareció imposible.

Saludos!

[Dulce Alejandra]

Suena interesante aunque nunca he cerrado mi sesion aqui asi que voy a hacer la prueba en este momenot, saludos

[derkenuke]

Estoy estudiando alguna alternativa para Mozilla u Opera...

[gcordoba]

si ya, entre a ese codigo pero no me funciona ya que hay una variable que no se que es ht, como la declaro, como una simple variable, tampoco me funciona, se tiene que hacer algo mas

Saludos....


function log_out()
{
//esta variable ht que es donde la declaran creo que por eso no me funciona, como la declaro asi var ht;

ht = document.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(gray s cale=1)";
if (confirm('¿En verdad quieres finalizar tu sesión?\n\nsi es así, presiona OK si no,\nentonces presiona el botón CANCEL'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</script

[moNTeZIon]

Creo que no sea cuestion de declarar la variable, ya que al asignarla a "algo" ya toma forma (en JavaScript, no en otros lenguajes)
A mi tampoco me funciona, pero no da errores, simplemente muestra el alert, pero sin desvanecer los colores. Imagino (por la palabra Microchof por ahi en medio) que servirá solo para Explorer, que es donde lo estoy probando, pero algo falta...

[moNTeZIon]

Hola de nuevo,
He estado haciendo pruebas y finalmente lo conseguí. Lo que no se porqué en Forosdelweb funciona con ese codigo... A mi me funciona cambiando esta linea:

ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(gray s cale=1)";

Por esta:

ht[0].style.filter = "Gray";

Saludos!

[JavierB]

Hola moNTeZIon

Puede que sea porque al verse el código en el mensaje se cuela un espacio, donde pone (grays cale=1) debe poner (grayscale=1)

A mí me ha funcionado de las dos formas, con el código que puse en mi anterior mensaje y con el tuyo.

Saludos,

[moNTeZIon]

Tienes toda la razón JavierB

[furoya]

Hola todos :

¡Sabía que había visto algo así en algún lado!.

Pero antes una aclaración. El filtro DX funciona a partir de IE5.5. Hay una sintaxis anerior que funciona en todos; creo que era filter:gray().

Bueno, en Firefox tambien se puede, pero con enormes limitaciones y de manera más compleja. No alcanza a las imágenes y hay que asignar el color a cada atributo en cada objeto.

Si alguien está viendo este mensaje con FF, puede copiar y pegar en la barra de direcciones el siguiente BML para ver el efecto en esta página

NOTA 1 :como ya se mencionó, el editor del foro agrega espacios al código, que no dejan funcionar los escripts. Si en el siguiente aparece alguno, deben borrarlos antes de dar el enter en la barra de dirección para que se ejecute correctamente.

NOTA 2 :He notado que lo que agrega es un doble espacio. Es más práctico llevar el BML a un editor de texto y usar el "Buscar y reemplazar". Aunque a mí el Notepad no me funcionó hasta que copié y pegué el doble espacio; si lo escribo no los encuentra.

Código:

 
javascript:(function(){function RGBtoHSL(RGBColor){with(Math){var R,G,B;var cMax,cMin;var sum,diff;var Rdelta,Gdelta,Bdelta;var H,L,S;R=RGBColor[0];G=RGBColor[1];B=RGBColor[2];cMax=max(max(R,G),B);cMin=min(min(R,G),B);sum=cMax+cMin;diff=cMax-cMin;L=sum/2;if(cMax==cMin){S=0;H=0;}else{if(L<=(1/2))S=diff/sum;else S=diff/(2-sum);Rdelta=R/6/diff;Gdelta=G/6/diff;Bdelta=B/6/diff;if(R==cMax)H=Gdelta-Bdelta;else if(G==cMax)H=(1/3)+Bdelta-Rdelta;else H=(2/3)+Rdelta-Gdelta;if(H<0)H+=1;if(H>1)H-=1;}return[H,S,L];}}function getRGBColor(node,prop){var rgb=getComputedStyle(node,null).getPropertyValue(prop);var r,g,b;if(/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(rgb)){r=parseInt(RegExp.$1,10);g=parseInt(RegExp.$2,10);b=parseInt(RegExp.$3,10);return[r/255,g/255,b/255];}return rgb;}function hslToCSS(hsl){return "hsl("+Math.round(hsl[0]*360)+", "+Math.round(hsl[1]*100)+"%, "+Math.round(hsl[2]*100)+"%)";}var props=["color","background-color","border-left-color","border-right-color","border-top-color","border-bottom-color"];var props2=["color","backgroundColor","borderLeftColor","borderRightColor","borderTopColor","borderBottomColor"];if(typeof getRGBColor(document.documentElement,"background-color")=="string")document.documentElement.style.backgroundColor="white";revl(document.documentElement);function revl(n){var i,x,color,hsl;if(n.nodeType==Node.ELEMENT_NODE){for(i=0;x=n.childNodes[i];++i)revl(x);for(i=0;x=props[i];++i){color=getRGBColor(n,x);if(typeof(color)!="string"){hsl=RGBtoHSL(color);hsl[1] = 0;n.style[props2[i]]=hslToCSS(hsl);}}}}})()

Lo saqué de aquí

http://www.squarefree.com/bookmarkle...or.html#no_sat

y la explicación está aquí

http://www.w3.org/TR/css3-color/#hsl-color

saludos

furoya

[furoya]

Hola de nuevo :

Estuve haciendo algunas pruebas y tengo un borrador que muestra un "color ↔ B&N" para Firefox, pero paso a paso. Supongo que IExplorer también lo podrá hacer, pero yo nunca lo vi.

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CAMBIA GRISES.</title>
<script type="text/javascript">

var grado = 100;
var hL0 = "";
var lL0 = "";
var hL1 = "";
var lL1 = "";
var hL2 = "";
var lL2 = "";
var hL3 = "";
var lL3 = "";
var hL4 = "";
var lL4 = "";
var brillo = 100;

function azar(){
hL0 = Math.ceil(Math.random()*100);
lL0 = Math.ceil(Math.random()*100);
hL1 = Math.ceil(Math.random()*100);
lL1 = Math.ceil(Math.random()*100);
hL2 = Math.ceil(Math.random()*100);
lL2 = Math.ceil(Math.random()*100);
hL3 = Math.ceil(Math.random()*100);
lL3 = Math.ceil(Math.random()*100);
hL4 = Math.ceil(Math.random()*100);
lL4 = Math.ceil(Math.random()*100);

for (i=0 ; i<5 ; i++){
document.getElementById("L"+i).style.color = "hsl("+eval('hL'+i)+","+grado+"%,"+eval('lL'+i)+"%)";
}
}

function gira(){
var rdns=(2*3.141592/360)

for(f=0;f<=359;f+=36){
var x = Math.floor(90 * Math.cos(rdns*f));
var y = Math.floor(90 * Math.sin(rdns*f));
document.getElementById("P"+f).style.left = 90 +x+ "px";
document.getElementById("P"+f).style.top = 90 +y+ "px";
}

}

function IGrises(){
for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, 100%, "+brillo+"%)";
brillo -= 10;
}
brillo = 100;

}


function grises(){
if (grado <= 101 && grado > -1){
grado -= 1;

for (i=0 ; i<5 ; i++){
document.getElementById("L"+i).style.color = "hsl("+eval('hL'+i)+","+grado+"%,"+eval('lL'+i)+"%)";
}

document.body.style.backgroundColor = "hsl(120, "+grado+"%, 50%)";
document.getElementById("bravo").style.backgroundColor = "hsl(300, "+grado+"%, 50%)";
document.getElementById("charly").style.backgroundColor = "hsl(30, "+grado+"%, 50%)";
document.getElementById("delta").style.backgroundColor = "hsl(50, "+grado+"%, 50%)";

document.getElementById("alfa").style.color = "hsl(0, "+grado+"%, 30%)";
document.getElementById("bravo").style.color = "hsl(60, "+grado+"%, 30%)";
document.getElementById("charly").style.color = "hsl(240, "+grado+"%, 30%)";

document.getElementById("bravo").style.borderColor = "hsl(400, "+grado+"%, 50%)";
document.getElementById("charly").style.borderColor = "hsl(800, "+grado+"%, 50%)";


for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, "+grado+"%, "+brillo+"%)";

if(brillo == 0)brillo = 100;
else {brillo -= 10;}
}
setTimeout("grises()" , 50);
}

else {
grado = 0;
brillo = 10;
}
document.title = grado+" "+brillo;
}



function IColor(){
for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, 0%, "+brillo+"%)";
brillo += 10;
}
brillo = 10;

}


function color(){

if (grado >= 0 && grado < 101){
grado += 1;

for (i=0 ; i<5 ; i++){
document.getElementById("L"+i).style.color = "hsl("+eval('hL'+i)+","+grado+"%,"+eval('lL'+i)+"%)";
}

document.body.style.backgroundColor = "hsl(120, "+grado+"%, 50%)";
document.getElementById("bravo").style.backgroundColor = "hsl(300, "+grado+"%, 50%)";
document.getElementById("charly").style.backgroundColor = "hsl(30, "+grado+"%, 50%)";
document.getElementById("delta").style.backgroundColor = "hsl(50, "+grado+"%, 50%)";

document.getElementById("alfa").style.color = "hsl(0, "+grado+"%, 30%)";
document.getElementById("bravo").style.color = "hsl(60, "+grado+"%, 30%)";
document.getElementById("charly").style.color = "hsl(240, "+grado+"%, 30%)";

document.getElementById("bravo").style.borderColor = "hsl(400, "+grado+"%, 50%)";
document.getElementById("charly").style.borderColor = "hsl(800, "+grado+"%, 50%)";


for(f=0;f<=359;f+=36){
document.getElementById("P"+f).style.color = "hsl(0, "+grado+"%, "+brillo+"%)";

if(brillo == 100)brillo = 0;
else {brillo += 10;}
}
setTimeout("color()" , 50);
}

else {
grado = 100;
brillo = 100;
}
document.title = grado+" "+brillo;
}

</script>

<style type="text/css">
body { background-color: hsl(120, 100%, 50%); width: 100%; margin: 0; }

#alfa { color: hsl(0, 100%, 30%); font-size: 200%; margin: 15px 10px; }

#bravo {  background-color: hsl(300, 100%, 50%); color: hsl(60, 100%, 30%); font-size: 200%;  border-color: hsl(400, 100%, 50%); border-width: 10px; margin-left: 15%; }

#charly { background-color: hsl(30, 100%, 50%); color: hsl(240, 100%, 30%); font-size: 200%;  border-color: hsl(800, 100%, 50%); border-width: 10px; margin-left: 15%; }

#delta { background-color: hsl(50, 100%, 50%); color: hsl(240, 100%, 50%); font-size: 200%; width: 50%; height: 250px; }

#eco {  position: relative; float: left; margin: auto; }

#foxtrot {  position: relative; float: right; }

#P0{color: hsl(0, 100%, 100%);}
#P36{color: hsl(0, 100%, 90%);}
#P72{color: hsl(0, 100%, 80%);}
#P108{color: hsl(0, 100%, 70%);}
#P144{color: hsl(0, 100%, 60%);}
#P180{color: hsl(0, 100%, 50%);}
#P216{color: hsl(0, 100%, 40%);}
#P252{color: hsl(0, 100%, 30%);}
#P288{color: hsl(0, 100%, 20%);}
#P324{color: hsl(0, 100%, 10%);}

.punto {position: absolute; font-size: 300%; }

.contAzar {position: relative; float: right; margin-top: 25%; }

.azar {font-size: 160%; font-weight: 900; font-family: cursive; }

.imag {height: 100%; width: 0; vertical-align: middle; }

</style>
</head><body onload="azar(); gira()">


<h1 id="alfa">Cambia gradualmente a escala de grises o color. (FF3.0, Op9.6, Chr2.0)</h1>

<div id="delta">

<div id="eco">

<div class="contAzar">
<span class="azar" id="L0">A</span> <span class="azar" id="L1">Z</span> <span class="azar" id="L2">A</span> <span class="azar" id="L3">R</span> <span class="azar" id="L4">.</span> 
</div>

</div>

<div id="foxtrot">

<span id="P0" class="punto">·</span> <span id="P36" class="punto">·</span> <span id="P72" class="punto">·</span> <span id="P108" class="punto">·</span> <span id="P144" class="punto">·</span> <span id="P180" class="punto">·</span> <span id="P216" class="punto">·</span> <span id="P252" class="punto">·</span> <span id="P288" class="punto">·</span> <span id="P324" class="punto">·</span> 

</div>

</div>
<br /><br />
<input type="button" value="COLOR" id="bravo" onclick="IColor(); color()" />
<input type="button" value="GRISES" id="charly" onclick="IGrises(); grises()" />

</body></html>

Hay varios efectos más, lo que puede confundir a la hora de desarmarlo. Dejo otra versión más despojada que además contiene el efecto para simular grisado de imágenes.

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>Pasos </title>
<script type="text/javascript">

var grado = 100;

function grises(){
if (grado <= 100 && grado > -1){
grado -= 1;

document.body.style.backgroundColor = "hsl(60, "+grado+"%, 50%)";
document.getElementById("bravo").style.backgroundColor = "hsl(300, "+grado+"%, 80%)";
document.getElementById("charly").style.backgroundColor = "hsl(30, "+grado+"%, 50%)";

document.getElementById("alfa").style.color = "hsl(0, "+grado+"%, 70%)";
document.getElementById("bravo").style.color = "hsl(60, "+grado+"%, 30%)";
document.getElementById("charly").style.color = "hsl(240, "+grado+"%, 35%)";

document.getElementById("bravo").style.borderColor = "hsl(400, "+grado+"%, 50%)";
document.getElementById("charly").style.borderColor = "hsl(800, "+grado+"%, 50%)";

for(i=0; i<2; i++){
document.getElementById("bola" + i).style.opacity = grado/100;
}

setTimeout("grises()" , 10);
}

document.title = grado;
}


</script>

<style type="text/css">
html { width: 100%; margin: 0; }

body { background-color: hsl(60, 100%, 50%); width: 100%; margin: 0; font-size: 100%; }

#alfa { color: hsl(0, 100%, 70%); font-size: 200%; margin: 15px 10px; text-align: center; font-weight: 900; }

#bravo { background-color: hsl(300, 100%, 80%); color: hsl(60, 100%, 30%); font-size: 200%;  border-color: hsl(400, 100%, 50%); border-width: 10px; margin: 15px 10px; text-align: center; }

#charly { background-color: hsl(30, 100%, 50%); color: hsl(240, 100%, 35%); font-size: 200%;  border-color: hsl(800, 100%, 50%); border-width: 10px; margin: 15px 10px; }

#delta {text-align: center; }

#bola0, #bola1{width: 1em; -moz-opacity: 1; position: absolute; top: 0; left: 0; margin: 0; padding: 0; border-collapse: collapse; }

#bola2, #bola3 {width: 1em; position: relative; top: 0; left: 0; margin: 0; padding: 0; border-collapse: collapse; }

.contBola {position: relative; }

</style>
</head>
<body>

<p id="alfa">
<span class="contBola">
<img src="http://www.forosdelweb.com/images/statusicon/user_offline.gif" id="bola2">
<img src="http://www.forosdelweb.com/images/statusicon/user_online.gif" id="bola0">
</span>

 Documento que cambia a Blanco & Negro.
<span class="contBola">
<img src="http://www.forosdelweb.com/images/statusicon/user_offline.gif" id="bola3" />
<img src="http://www.forosdelweb.com/images/statusicon/user_online.gif" id="bola1" />
</span><br>
(FF3.0, Op9.6, Chr2.0)</p>

<br><br>

<h1 id="bravo">Texto Texto Texto Texto Texto Texto Texto </h1>
<br><br>
<p id="delta"><input type="button" value="CAMBIAR" id="charly" onclick="grises()" /></p>

</body></html>

[Actualización : los ejemplos funcionan en Mozilla / Firefox, Opera, Chrome.]

Continúa en el mensaje siguiente

[furoya]

Viene del mensaje anterior.

En todos los casos reasigno los colores con javascript ya que no sé leerlos desde la hoja de estilos. Creo que con nodos y DOM se puede, pero yo no entiendo aún cómo funcionan ( El bookmarklet lo hace, aunque en todo el documento y no sólo donde le digamos, lo que vuelve muy lento el cambio ).

Usando estilos in line sería más fácil leer la cadena. Pero devuelve el valor en RGB; por lo que habría que convertirlo a HSL. No lo hago porque ya empecé a ocuparme en otra cosa, y las funciones ya existen; solamente hay que aplicarlas.

Dejo algunos enlaces para quien quiera seguir con ésto

colors and ferret

ejemplos rgba - hsla

Color design tutorial

Transformation of Colour Codings

saludos

furoya

[furoya]

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

[furoya]

Otra versión actualizada del código anterior. Ésta corrige algunos espacios que no cubre la capa. Por supuesto, no es un verdadero "deshabilitado" en ningún caso. Porque se puede seleccionar con el botón secundario o con la combinación de teclas.

Código HTML:

<!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:fixed; height:0; overflow:hidden; background:url("http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif") transparent; }
#tapa {_position:absolute; top:0; left:0; }
</style>
<script type="text/javascript">

function deshabilitar(){
var deshabilitado = confirm("¿Quiere deshabilitar el documento?.");

if(deshabilitado){
document.body.style.overflow = "hidden";
document.getElementsByTagName("html")[0].style.overflow = "hidden";
var altura = document.body.scrollHeight * 2;
var anchura = document.body.scrollWidth * 2;

//alert(altura + " " + anchura)

document.getElementById("tapa").style.height = altura+"px";
document.getElementById("tapa").style.width = anchura+"px";
}
}

</script>
</head>
<body>
<div id="tapa"></div>
<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()" onfocus="this.blur()">Deshabilitar </a></h2>
<img alt="Logo" height="108" width="207" 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 alt="Imagen" height="64" width="64" src="http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif" style="background:#fff; margin:20px;"></h2>
<h2><a href="javascript:deshabilitar()" onfocus="this.blur()">Deshabilitar </a></h2>
</body>
</html> 

El hack de CSS se puede eliminar usando posición absoluta en todos los casos (el ejemplo lo probé en IE6 y FF2) y agregando en el escript la línea en rojo

Código:

document.getElementById("tapa").style.width = anchura+"px";
document.body.style.position = "fixed";
}

pero después no se puede desplazar el documento con el teclado en FF.