Foros del Web - Ver Mensaje Individual

furoya · #12 (**permalink**) 23/01/2006, 18:16

Hola de nuevo :

no es nada, gutiw; me molestó algo el hecho de que te encapricharas con quitar la etiqueta nobr, si ya sabes que funciona y la necesitas para hacer el efecto compatible. Que un validador no la acepte no me parece excusa.

Pero en fin, si después de todas las explicaciones sigues con la misma idea, no hay nada que hacer. Salvo reescribir el código.

Más arriba comenté que "quizá agrandando el div que contiene las imágenes" porque si el tamaño alcanza para todas, no tienen por qué derrapar; y el nobr o el white-space: nowrap ya no tienen sentido.

El ejemplo que pusiste tiene varios puntos difíciles. Uno es que calcula la velocidad según la posición del puntero -sobre el banner y con respecto al origen del documento- y eso es complicado, no muy seguro y usa códigos diferentes para cada navegador. Es decir, que si el javascript es propetario puede no adaptarse a algún otro y estamos en la misma que con el nobr : no les va a andar.
Como sé que no estás muy práctico con javascript, hice un desplazador que tiene un escript elemental, es solamente un loop que va desplazando la tira (cambia el left de la posición relativa) a distintas velocidades.

El fuerte está en HTML y CSS, por lo que vas a tener que hacer muchos ajustes a mano, pero no creo que sea problema para ti.

La tira de imágenes es del tipo "sin fin" -donde termina vuelve a empezar- y la posición del puntero la "mido" con 2 capas transparentes mapeadas en 'cebra' vertical ( las puedes ver cambiando background+color por background-color ). Cada raya de la cebra tiene un onmouseover que asigna la velocidad paso y dispara una función para desplazar; y un onmouseout que detiene el loop para recomenzarlo limpio en la siguiente raya o detenerlo si el puntero sale del banner.

La velocidad es progresiva de adentro hacia afuera; en IE funciona bien, pero en FF no se nota. Quizá le erré en los valores o la máquina que usé estaba lenta; igual lo puedes probar tú y ajustarlo a gusto (sí, una por una).

Hay un par de hacks que no validan en CSS, pero tu problema era el HTML ¿no?. -Insisto : ¿NO?- Así que solamente tienes que meter tus imágenes y empezar a hacer los ajustes de estilo.

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>SLIDE. </title>
<script type="text/javascript">
var tiempo, desp, anchoImag, paso;

function desplazaD(){
document.title = desp+" "+paso; /*MUESTRA POSIC. Y VELOCIDAD EN TÍTULO*/
if(desp >= 0){
desp = (anchoImag*-1);
}
desp += 1;
document.getElementById("linea").style.left = desp +"px";

ruloD();
}

function ruloD(){
tiempo = setTimeout("desplazaD()", paso);
}

function desplazaI(){
document.title = desp+" "+paso; /*MUESTRA POSIC. Y VELOCIDAD EN TÍTULO*/
if(desp <= anchoImag*-1){
desp = 0;
}
desp -= 1;
document.getElementById("linea").style.left = desp +"px";

ruloI();
}

function ruloI(){
tiempo = setTimeout("desplazaI()", paso);
}


function inicio(){
anchoImag = document.getElementById("medidor").offsetWidth;
var imag = document.getElementById("medidor").innerHTML;

//alert(anchoImag+" "+document.getElementById("linea").offsetWidth)

document.getElementById("linea").innerHTML = imag + imag;
document.getElementById("linea").style.width = (anchoImag*2)+4 + "px";
/*ES POSIBLE QUE HAYA QUE AJUSTAR EL '4' DE (anchoImag*2)+4 SEGÚN EL ANCHO 
DE LOS BORDER DE ENLACE*/
desp = 0;
document.getElementById("linea").style.left = desp + "px";

//alert(anchoImag+" "+document.getElementById("linea").offsetWidth)
}

window.onload = inicio;
</script>
<style type="text/css">
#cont {width:330px; overflow:hidden; border:3px solid blue; position:relative; 
height:72px; background-color:#ffcc99; }

#linea {margin:4px 0; position:absolute; height:62px; 
padding:0; background-color:#ffcc99; 
width:650px; /*DEBE SER MAYOR QUE LA SUMA DEL ANCHO DE LAS 
IMÁGENES Y SUS BORDES; PARA ESTAR SEGUROS DE QUE NO DERRAPAN SE PUEDE 
CAMBIAR TEMPORARIAMENTE EL overflow:hidden DE #cont*/
}

a.botones {border-width:4px; border-color:#00ff00; border-style:solid; 
background-color:#cccccc; font-size:50px; }

a.botones:link {border-color:#00ff00; }

a.botones:visited {border-color:#00ff00; }

a.botones:hover {border-color:#ff0000; }

a.botones:active {border-color:#0000ff; }

a.botones img {width:50px; height:50px; vertical-align:top; margin-top:2px; 
_margin-top:4px; /*HACK PARA IE*/}

#medidor {background-color:#000000; }

#tapa0, #tapa1 {position:absolute; width:130px; height:76px; border-width:0; 
background+color:red; /*ES PARA "VER" LAS CAPAS MAPEADAS, BORRARLO*/}

#tapa0 {top:0; left:0; }

#tapa1 {top:0; left:200px; }
</style>
</head>
<body>
<!--[if lt IE 5.5000]> 
<style>
#li--nea {width:620px; }
.botones{height:58px; }
</style>
<![endif]-->

<h1>Desplaza im&aacute;genes. (IE/FF)</h1>

<div id="cont">
<div id="linea">
<span id="medidor">
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/cool.gif" alt="cool" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/wink.gif" alt="wink" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/frown.gif" alt="frown" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/biggrin.gif" alt="biggrin" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/chillando.gif" alt="chillando" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/smile.gif" alt="smile" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/dedosarriba.gif" alt="dedosarriba" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/ojotes.gif" alt="ojotes" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/sho.gif" alt="sho" /></a>
</span>
</div>
<map name= "area0" >
<area alt="«" shape="rect" coords="0,0,10,100" 
onmouseover="paso=10; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="10,0,30,100" 
onmouseover="paso=20; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="30,0,50,100" 
onmouseover="paso=30; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="50,0,70,100" 
onmouseover="paso=40; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="70,0,90,100" 
onmouseover="paso=60; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="90,0,110,100" 
onmouseover="paso=80; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="110,0,130,100" 
onmouseover="paso=100; desplazaD()" onmouseout="clearTimeout(tiempo)" >
</map>

<map name= "area1" >
<area alt="»" shape="rect" coords="0,0,10,100" 
onmouseover="paso=100; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="10,0,30,100" 
onmouseover="paso=80; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="30,0,50,100" 
onmouseover="paso=60; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="50,0,70,100" 
onmouseover="paso=40; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="70,0,90,100" 
onmouseover="paso=30; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="90,0,110,100" 
onmouseover="paso=20; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="110,0,130,100" 
onmouseover="paso=10; desplazaI()" onmouseout="clearTimeout(tiempo)" >
</map>
<img src="http://www.forosdelweb.com/clear.gif" id="tapa0" usemap="#area0" alt="izq" />
<img src="http://www.forosdelweb.com/clear.gif" id="tapa1" usemap="#area1" alt="der" />
</div>

<p>Moviendo el puntero a izquierda o derecha del <i>banner</i> 
se desplazan los enlaces, que solo se activan al detenerse la 
animaci&oacute;n.</p>

  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
  </p>

</body></html>

Ah!, la función inicio() es para duplicar el contenido de la tira (así se logra el efecto "sin fin", poniendo la misma serie de imágenes una a continuación de la otra).

Cualquier duda, avisa.