Hice un efecto JS que simula una imagen vista a través del agua en movimiento. Creí que andaba bien hasta que lo probé con otra imagen y/o en otra máquina.
Descubrí que el efecto no empezaba hasta que recargaba la página. Y después podía hasta cerrar la sesión, que ya no volvía a aparecer el problema.
Como dije antes, si cambiaba la imagen ¡se clavaba de nuevo!. Un F5 y como si no hubiera pasado nada.
Le puse un escript que hacía una recarga al abrir; pero llegar a éso es una vergüenza.
No pude encontrar dónde está el error. Quizá es tan evidente que por eso no lo veo (me pasa mucho). Si alguien quiere echarle una mirada, aquí dejo el código.
Código:
<html>
<head>
<title>IMAGEN CON OLAS.</title>
<style>
body{background:#000080; color:#FFFFFF}
#contenedor{position:relative}
#imag0, #imag1{position:absolute; top:0px; left:0px; margin-left:50px; margin-top:0px}
a:link {color: #FF99FF}
a:visited {color: #99FF99}
a:hover {color: #FF9999}
a:active {color: #9999FF}
</style>
<script language= "JavaScript">
var ruta = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif "; //de la imagen
var velocidad = 250; //de la ola en ms
var alto, ancho, velocidad, mod, arr, der, abj, izq, lado, desplaza;
var imagen = new Image();
imagen.src = ruta;
var imagenes = "";
function olas0(){
alto = imagen.height;
ancho = imagen.width;
if(alto>ancho)mod = (ancho/4);
else mod = (alto/4);
imagenes += "<img src=\""+imagen.src+"\" id=\"imag0\">"
imagenes += "<img src=\""+imagen.src+"\" id=\"imag1\">"
document.getElementById("contenedor").innerHTML = imagenes;
document.getElementById("contenedor").style.height = alto+"px";
setTimeout("olas1()" , 1000);
olas3();
}
function olas1(){
lado = Math.floor(Math.random() * (mod*3)) + Math.floor(mod/3);
arr = Math.floor(Math.random() * (alto-lado));
izq = Math.floor(Math.random() * (ancho-lado));
abj = arr + lado;
der = izq + lado;
despIzq = parseInt(document.getElementById( "imag0" ).style.left);
if(desplaza){
document.getElementById( "imag1" ).style.top = "0px";
document.getElementById( "imag1" ).style.left = "1px";
}
else{
document.getElementById( "imag1" ).style.top = "1px";
document.getElementById( "imag1" ).style.left = "0px";
}
document.getElementById( "imag1" ).style.clip = "rect("+arr+" "+der+" "+abj+" "+izq+")";
olas2();
}
function olas2(){
setTimeout("olas1()", velocidad);
}
function olas3(){
if(desplaza) desplaza = false;
else desplaza = true;
setTimeout("olas3()", 2000);
}
</script>
</HEAD>
<BODY onload="olas0()">
<h2>Imagen con efecto de ondas "en agua".</h2>
<div id="contenedor"></div>
<br />
Ver también <a href="Imagen en agua1.htm">Imagen en agua1.htm</a>.
</body>
</html>
Solamente pido (¡ruego!) que quien se decida a probarlo lea 2 veces las cicunstancias en las que falla. No quiero que me digan "-
Anda perfectamente." después de que (p.e.) le hicieron un
refresh.
Está probado en
IE ,
FF y
Op; aunque seguramente en modo "compatible", ya que
Mozilla tiene su propia versión de
clip y no sé cómo es que interpreta la de
Microsoft.
Gracias
furoya