Ya,
aqui está:
Explico mi proceso de desarrollo por si a alguno le sirva:
1) abro un editor de textos (textedit) y pienso en mi plan de trabajo, despues del algunas leves modificaciones y pensar algunas tecnicas quedo con esto:
Cita: PLANEACION DE EFECTO FADE IN AND OUT EN ELEMENTOS HTML
necesito las funciones:
*init()
-asigna la funcionalidad a los onclick de los distintos enlaces
-obtiene referencia de los elementos necesarios
-esconde todos los elementos excepto el activo.
cambiarPrincipal()
-accionar fadeout()
fadeout()
-hace el degradado de la imagen principal
-dispara fadein()
fadein()
-hace el desvanecido de entrada de la imagen principal.
Ahi tengo ya mi layout de como quiero que funcione el javascript, es buena idea hacerlo de esa manera de modo que sepas a donde vas y que camino seguirás de otro modo terminas haciendo puras barbaridades.
2) Me olvido de JS por un rato, me concentro en la parte importante, el XHTML. Como quiero que mi efecto se degrade en favor del usuario, lo hago todo desde un principio asumiendo que todo estuvo mal y por alguna razon el usuario no puede usar JS. Supongamos lo que está entre los comentarios es lo que nos regresa una consulta a una base de datos:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>fade In and Out</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" />
<script type="text/javascript" src="fade.js"></script>
</head>
<body onload='init()'>
<!-- ...Arriba tu sitio... -->
<div id="contenedorG">
<ul id="menu">
<li><span></span><a href="#KristinKreuk1">Kristin Kreuk 1</a></li>
<li><span></span><a href="#KristinKreuk2">Kristin Kreuk 2</a></li>
<li><span></span><a href="#ZhangZiyi">Zhang Ziyi</a></li>
</ul>
<div id="KristinKreuk1" class="fade">
<img src="img/kristin-kreuk-1024x768-22736.jpg" alt="" width="512" height="384" />
<p>Kristin Kreuk</p>
</div>
<div id="KristinKreuk2" class="fade">
<img src="img/kristin-kreuk.jpg" alt="" width="512" height="384" />
<p>Kristin Kreuk II</p>
</div>
<div id="ZhangZiyi" class="fade">
<img src="img/zhang-ziyi.jpg" alt="" width="512" height="384" />
<p>Zhang Ziyi</p>
</div>
</div>
<!-- ... Abajo tu sitio...-->
</body>
</html> Tal como esta no muestra algo muy plano y feo, pero que funciona si el JS y el CSS fallan, lo que nos deja con algo feo pero accesible. Notese que todos mis enlaces tienen un href definido de modo que si todo falla por lo menos el enlace me mande a la seccion correspondiente. Los span en los li del menu son para lograr un efecto CSS, bien pueden ser quitados del markup e introducidos mediante JS para no ensuciar el XHTML, pero esta vez preferí evitarme la fatiga
Ahora vamos con nuestro CSS, nuevamente asumiendo que el usuario no tiene JS.
Código:
body { background-color: #CCC; }
#contenedorG
{
position: relative;
background-color: #333;
width: 750px;
padding: 10px 0;
}
.fade
{
position: relative;
width: 512px;
height: 384px;
margin: 10px;
}
.fade p
{
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
background-color: #000;
width: 100%;
margin: 0;
text-align: center;
height: 3em;
border-color: #9F3;
border-width: 2px 0 0 0;
border-style: solid;
}
#menu{
float: right;
margin: 0 20px 0 0;
padding: 0;
}
#menu li{
background-color: #FF0;
padding: 10px;
border: 1px solid #9CF;
list-style-type: none;
position: relative;
width: 7em;
height: 1em;
}
#menu li span{
display: block;
position: absolute;
width: 100%;
height: 50%;
background-color: #FF9;
margin: 0;
top: 0;
left: 0;
}
#menu li:hover span{
background-color: #FFC;
}
#menu li a{
display: block;
z-index: 1500;
position: absolute;
color: #609;
font-weight: bold;
font-family: sans-serif;
}
#menu li:hover a{
color: #606
}
(Proximamente un tuto en
mi blog sobre como lograr el efecto de los botones, notese que no he usado imagenes.)
Ahora nuestro JS, no lo voy a explicar por que es totalmente basico y creo que habla por si mismo, pero si se quiere una explicacion profunda de lo que el JS hace, la pondré en mi blog.
Código javascript
:
Ver originalfunction init(){
var contenedorG = document.getElementById('contenedorG');
var imagenes = contenedorG.getElementsByTagName('div');
var menu = document.getElementById('menu');
var enlaces = menu.getElementsByTagName('a');
contenedorG.style.height = '400px';
for(var a=0; imagenes[a]; a++){
imagenes[a].style.position = 'absolute';
if(a!=0){
imagenes[a].style.opacity = 0;
imagenes[a].style.filter = 'alpha(opacity=0)';
}else{
opaco = imagenes[a];
opaco.style.opacity = 1
opaco.style.filter = 'alpha(opacity=100)';
}
}
for(var i=0; enlaces[i]; i++){
enlaces[i].onclick=function(){
cambiarPrincipal(this);
return false;
}
}
}
cambiarPrincipal = function(enlace){
var imagenID = enlace.href.split('#')[1];
if(opaco.id == imagenID){
return;
}
fadeOut(imagenID);
}
fadeOut = function(fadeInElem){
var intervalo = setInterval(function(){
var opacidadNueva = parseFloat(opaco.style.opacity) - .1
opaco.style.filter = 'alpha(opacity=' + opacidadNueva * 100 + ')';
opaco.style.opacity = opacidadNueva;
if(opaco.style.opacity <=0){
clearInterval(intervalo);
opaco = document.getElementById(fadeInElem)
}
}
, 10);
fadeIn(fadeInElem);
}
fadeIn =function(fadeInElem){
fadeInElem = document.getElementById(fadeInElem);
var intervalo2 = setInterval(function(){
var opacidadNueva = parseFloat(fadeInElem.style.opacity) + .1;
fadeInElem.style.opacity = opacidadNueva;
fadeInElem.style.filter = 'alpha(opacity=' + opacidadNueva * 100 + ')';
if(fadeInElem.style.opacity >=1){
clearInterval(intervalo2);
}
}
, 10);
}
Lo he probado en IE 6, 7, Safari, FF y funciona, solo hay que arreglar el efecto de los botones en IE6, pero yo no me tomaría el tiempo
Saludos.