Hola todos :
Se me ocurrió estrenar el
host para imágenes, y aprovecho para poner uno de esos efectos muy pavos, pero que solamente se ven con la imagen
ad hoc.
Éste simula un cambio de enfoque entre el primer plano y el fondo. Las fotos son bastante malas, pero tengan en cuenta que no soy diseñador y que las hice a las apuradas para probar el efecto.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>CAMBIO DE FOCO.</title>
<meta content="text/html; charset=windows-1252" http-equiv=content-type>
<meta http-equiv="imagetoolbar" content="no">
<style>
body{background:black; color:white;}
#contenedor{align:center; text-align:left; position:relative; width:600px; height:400px; border-collapse:colapse; }
#imagenFrente {position:absolute; width:600px; height:400px; cursor: pointer; _cursor: hand; margin: 0; filter:alpha(opacity=100); khtml-opacity:1; -moz-opacity:1; opacity:1;}
#imagenFondo {position:absolute; width:600px; height:400px; margin:0; }
</style>
<script>
var opacidad = 100;
var grado = 5; /*1; 2; 4; 5; 10; 20; 25; 50*/
var paso = 10; /*1; 2; 4; 5; 10; 20; 25; 50*/
function foco(){
grado = grado*-1;
cambio()
}
function cambio(){
opacidad += grado;
if((opacidad > 0) && (opacidad < 100)){
document.title = opacidad+" "+grado;
document.getElementById('imagenFrente').style.cursor = "wait";
if(document.getElementById('imagenFrente').style.KhtmlOpacity) document.getElementById('imagenFrente').style.KhtmlOpacity = opacidad/100 ;
else if(document.getElementById('imagenFrente').style.MozOpacity) document.getElementById('imagenFrente').style.MozOpacity = opacidad/100;
else if(document.getElementById('imagenFrente').filters) document.getElementById('imagenFrente').filters.alpha.opacity = opacidad;
else document.getElementById('imagenFrente').style.opacity = opacidad/100;
cambio1();
}
else{
document.title = opacidad+" "+grado+" FIN";
document.getElementById('imagenFrente').style.cursor = "";
}
}
function cambio1(){
setTimeout('cambio()',paso);
}
</script>
</head>
<body>
<h2>Simula un cambio de enfoque entre el primer plano y el fondo con
<I>click</I> en la imagen. (IE6/7 Moz2 Op9 Kon? Saf?)</h2>
<center>
<div id="contenedor">
<IMG id="imagenFondo"
src="http://img160.imageshack.us/img160/5271/frenteranadh6.jpg" >
<IMG id="imagenFrente" onclick="foco();"
src="http://img259.imageshack.us/img259/6365/fondoranab3xi.jpg" >
</div>
</center>
</body>
</html>
En
Internet Explorer y
Opera se ve el cambio bastante rápido; pero en
Firefox es notoriamente más lento (aunque esto depende mucho de la máquina en que se lo mire); no lo pude probar en
Konqueror o
Safari.
El mismo truco se puede usar para 'convertir' imágenes a color o B&N, para hacer un
morphing ...
saludos
