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á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ó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.
quizá agrandando el div que contiene las imágenes... ¿que pasa si pones solamente 2?. Ahora no tengo un Mozilla para probar el código. Pero tiene que andar.
¡Éso sí es tomarse trabajo!
