Ahora pude mandarte un MP.
Creo que esto ya lo conté : una vez me sacaron la contraseña de una cuenta de correo y me suscribieron a cuanto sitio chanchito encontraron, además de enviar mensajes con mi remitente a personas que ni conocía. Fue una manera de avisarme que no dejara más la sesión abierta en una máquina pública, pero en realidad no fue mi culpa, aquel administrador la cerró antes de que llegara a desloguearme, y después no la reinició antes de dársela a otro, para borrar mis cookies.
Bien, terminemos de divagar. Al final no me aguanté (otra vez) y empecé a trabajar en el rollover. Pero lo del giro era demasiado circesne, así que hice ese que mencionaste de la transición cambiando
opacity.
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>TRANSICIÓN CSS.</title>
<style type="text/css">
/* contiene botón, divs e imágenes */
#caja1 {position: relative; width: 0;
height:0; text-align: center; margin-bottom: 22em;
}
/* recibe hover y contiene imagen delantera */
#caja2 {width: 0; height: 0; position: absolute;
top:0; left: 0; margin:0;
}
/* aplica opacidad a la imagen delantera
y cambia a través del hover */
#caja2 .imag2 {opacity: 1; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
#caja2:hover .imag2 {opacity: 0; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
/* imágenes colocadas una delante de la otra
y desplazadas fuera de la caja */
.imag1, .imag2 {position: absolute; top:0; left: 10em;
width: 30em;
}
/*cambio paso a paso de imag2 */
.imag2 {
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-o-transition: opacity 1.5s linear;
}
/* evita que en hover se active también
sobre la imagen */
#tapa1 {position: absolute; top:0; left: 10em;
width: 30em; height: 20em;
border: 1px solid white;
background-image: url(0.0); /* para IE8, Op */
}
/* no está cubierto por tapa1 y se ve como
el elemento para activar con el hover */
#boton {border-width:0.4em; font-size: 1em;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Botón que cambia imagen con <tt>hover</tt>.
(Transición para Safari / Chrome, Opera).</h2>
<div id="caja1">
<img class="imag1" src="http://img160.imageshack.us/img160/5271/frenteranadh6.jpg">
<div id="caja2">
<input type="button" onclick="alert('Nada.')"
value="BOTÓN" id="boton">
<img class="imag2" src="http://img259.imageshack.us/img259/6365/fondoranab3xi.jpg">
</div>
<div id="tapa1"> </div>
</div>
<hr />
<p>Fin.</p>
</body>
</html>
El 'reemplazo' es en realidad un "transparentado" de imagen, para que permita ver la que hay detrás. No es el mejor método, pero me permite hacer ese efecto de transición en los navegadores que lo soportan.
IExplorer es un problema, porque la opacidad la cambia con un filtro. En realidad, ahí debí usar un
revealtrans, pero no sé cómo dispararlo con
hover.
O sí, puedo usar
expression() metiendo adentro una segunda función. Pero entonces estaría usando javascript, y para eso pongo todo en un escript y me ahorro cualquier problema.
Recién se me ocurrió que podría agregar el ejemplo de 'insertar' la imagen con CSS, pero no sé si se pueden combinar font=monospace]:hover[/font] con
:after. Por tus comentarios supongo que sí. Cuando tenga algo de tiempo lo pruebo (si nadie se anima a hacerlo primero).
Efecto 'enfoque' con cambio de opacidad