ayuda con marquee

lobbys · #1 (**permalink**) 07/07/2009, 17:57

hola no donde poner estetema asi que lo postee aqui el probelam es simple y no estyo seguro que se logre hacer o no. Se puede hacer que una marquesina salgadespues de otra, no juntas sino que sale una se coloca y ni bien se coloco salga laotra? se puede hacer eso?como?

hades87 · #2 (**permalink**) 08/07/2009, 02:18

Que yo sepa no, pero el uso de marquesinas es de los años 90 y no se debería usar en una web actual, es antiusable y aporta poca información.

lobbys · #3 (**permalink**) 08/07/2009, 17:46

y si ps qe me recomiendas?

C2am · #4 (**permalink**) 08/07/2009, 18:28

Hola lobbys
Podrias por favor traducir esto:

Cita:

Iniciado por lobbys

y si ps qe me recomiendas?

Seguro que después viene la ayuda.

Hocker · #5 (**permalink**) 08/07/2009, 20:06

En cuanto a si se puede o no, estoy casi seguro que se puede, casi todo se puede.
Pero en realidad no tengo idea de que es exactamente lo que estas tratando de lograr,
si nos explicas con calma con gusto te ayudamos.

Recuerda
La calidad de tus preguntas determina la calidad de las respuestas que recibes

hades87 · #6 (**permalink**) 09/07/2009, 00:45

Pues simplemente pon un texto estático y ya está. Se leerá mas fácil y sin tantas complicaciones.

lobbys · #7 (**permalink**) 09/07/2009, 18:19

ok ok yo dije que el marquee es antiguo, eso lo se... entonces que me pueden recomendar???

furoya · #8 (**permalink**) 09/08/2009, 12:28

Hola todos :
Me pareció notar un dejo de fastidio en tu último mensaje, lobbys. Que hasta sería justificable : todos te decimos qué no debes usar, pero nadie te sugiere opciones.
El problema de marquee no es que sea "viejo" (div y table son todavía más antiguos, y los usa todo el mundo), sino que es código propietario; aunque como es compatible con casi todos los navegadores, tampoco ése debería ser un inconveniente. Bueno, para ti sí, porque algunos parámetros, valores y eventos no son tan "compatibles", y así no te va a servir de mucho. Pero eso lo vamos a ver más abajo.

Quizá la mejor discusión sería si apoyamos o no las animaciones HTML o CSS (en realidad DHTML y ... ¿DCSS?). Algo que también vamos a dejar para más adelante.

Como insinuó Hocker, tu pregunta no es clara. Y no podemos estar interrogándote o tirando ejemplos para ver si de casualidad la pegamos con lo que buscas. (Que, en fin, es lo que voy a terminar haciendo.)

Pero antes te cuento una breve historia.
Hace poco respondí a una consulta sobre una scrollbar; y resultó que el autor llamaba "scrollbar" no a la barra de desplazamiento sino al bloque con contenido que a un lado tenía una scrollbar. Esta suerte de metonimia es la que nos complica a la hora de responderles.

¿Qué pasaría si estás llamando "marquesina" al contenido que se despalza y no al objeto marquee (en realidad, al 'elemento marquee'; no nos apuremos, recién más abajo va a ser un 'objeto') el ejemplo sería entonces relativamente fácil. Si hay que pasar una palabra, y recién cuando esta desaparece debe salir la siguiente, alcanza con separarlas la misma distancia que tenga de largo el elemento marquee.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>WORD SPACING.</title>
<style type="text/css">
marquee {border: 1px solid red; margin-top: 20px; width: 500px; color: #800000; }

marquee p {margin: 0; background-color: #cccccc; white-space: nowrap; word-spacing: 500px; font: normal normal 900 32px/normal fantasy, cursive; }
</style>
</head>
<body>
<h2>Marquesina con palabras espaciadas. IE, FF, Op, Chr, Saf</h2>

<marquee><p>FOROS DEL WEB</p></marquee>

<p>Cuando termina de pasar una palabra, comienza a pasar la siguiente.</p>
</body>
</html>

En IE 6+ funciona muy bien; pero los demás navegadores tienen problemas con los porcentajes. Por eso el ejemplo tiene ancho fijo.

Por supuesto que no debe ser lo que estás buscando. Más bien serán unas etiquetas marquee encadenadas, para que cuando termine el loop de la primera, se dispare la segunda.
Para eso se usan los eventos. Más exactamente onfinish, que se ejecuta cuando la marquesina termina de rotar.
¿La mala noticia? Es JScript (lenguaje propietario de Microsoft). Aún así, Firefox lo reconoce como un evento javascript propietario de Mozilla. Los demás, no. ¡Ni Opera!. Por lo que esto tampoco te sirve.
Igual te dejo un ejemplo.

Código HTML:

<!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>MARQUEE ONFINISH.</title>
<script type="text/javascript">
function end(mqsn){
document.getElementById(mqsn).scrollAmount = "5";
}
</script>
<style type="text/css">
marquee {¬border: 1px solid red; margin-top: 20px; font: 900 32px fantasy, cursive; letter-spacing: 32px; width: 50%; color: #800000; }
</style>
</head>
<body>
<h2>Marquesinas encadenadas. (IE5.5+ / FF3.5)</h2>

<marquee loop="1" behavior="slide" scrollamount="5" direction="left" onfinish="end('segunda')" id=primera>FOROS</marquee>
<p></p>
<marquee loop="1" behavior="slide" scrollamount="0" direction="right" onfinish="end('tercera')" id=segunda>DEL</marquee>
<p></p>
<marquee loop="1" behavior="slide" scrollamount="0" direction="left" id=tercera>WEB</marquee>
<p>Al detenerse la anterior, se dispara la siguiente.</p>
</body>
</html>

Lo mejor entonces es simular unas marquesinas con javascript y hacer todas las animaciones con este lenguaje.
Hay montones de ejemplos en el Foro y en la web; y para hacer el tuyo "a medida" deberíamos saber exactamente qué es lo que quieres. De todas las posibilidades, elegí ésta

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>MARQUEE JS.</title>
<script type="text/javascript">

var marquesinas = ["primera", "segunda", "tercera"];
var suma = 5;  //scrollamount en pixeles
var velocidad = 50;  //scrolldelay en milisegundos

function inicia(){
for(i=0; i<marquesinas.length; i++){
var mrq = document.getElementById( marquesinas[i] );
var ancho = mrq.offsetWidth;
mrq.style.paddingLeft = ancho + "px";

}
desplaza();
}

function desplaza(){
var mrq = document.getElementById( marquesinas[0] );

if(parseInt(mrq.style.paddingLeft) > suma){
mrq.style.paddingLeft = parseInt(mrq.style.paddingLeft) - suma + "px";

setTimeout("desplaza()", velocidad);
}

else{
mrq.style.paddingLeft = 0;

marquesinas.shift(); /*NO ME ACUERDO SI FUNCIONA EN IE6*/

if(marquesinas.length != 0){
desplaza();
}
}
}
window.onload = inicia;
</script>
<style type="text/css">

#primera, #segunda, #tercera {border: 2px solid #ff0000; margin: 10px 0; overflow: hidden; }

.mrqsn {font: normal normal 900 32px/normal fantasy, cursive; color: #800000; background-color: #cccccc; }

</style>
</head>
<body>
<h2>Marquesinas encadenadas, simuladas con javascript. IE, FF, Op, Chr</h2>

<div id=primera><span class=mrqsn>FOROS</span> </div>
<div id=segunda><span class=mrqsn>del</span> </div>
<div id=tercera><span class=mrqsn>WEB</span> </div>

<p>Desplaza hacia <tt>direction=left behavior=slide loop=1</tt>.</p>
</body>
</html>

Algún método de array (como shift()) o alguna propiedad CSS (como padding) me parece que no andaban en IExplorer 6. Puede que haya que hacerle ajustes de compatibilidad.

O escribirlo todo de nuevo, si no es lo que buscabas.

Ayuda con JavaScript de marquesina afiliado

Marquee: Stop and play

Marquesina ascendente con cualquier clase de contenido!

modificar codigo scroll

texto que sobrepasa div #14

Velocidad para el Marquee

Etiqueta "nobr" no aceptada

http://www.mozilla.org/docs/dom/samp...despacing.html

http://www.mozilla.org/docs/dom/samp...olorfades.html

http://msdn.microsoft.com/en-us/libr...51(VS.85).aspx

lobbys · #9 (**permalink**) 10/08/2009, 13:30

Bueno amigo ya habia echado tierra a ese tema, Yo llamo marquesina a los contenidos que uno inserta entre los codigos <marquee> </marquee>. Ya deje de utilizarlo y preferi meterle una imagen para dareldinamismo al contenido.
aun asi tomare en cuenta tu respuesta Furoya

furoya · #10 (**permalink**) 13/08/2009, 11:50

¡A sólo 1 mes y ya lo abandonaste!

Lo más gracioso es que ese ejemplo de contenido espaciado lo puse como "relleno", para hacer un poco más completo el tema. Realmente nunca imaginé que fuera eso lo que precisabas.

lobbys · #11 (**permalink**) 13/08/2009, 14:01

si yase que fue solo 1 mes pero aca hay varios trab y no puedotomarles mucho time

furoya · #12 (**permalink**) 30/11/2010, 14:22

Sí, el tiempo siempre atenta contra la calidad. Igual el tema sirvió para poner varios ejemplos desarmables y estudiables.

Es más, vuelvo acá porque me parece que es el lugar ideal para responder a una objeción que me hicieron por otro efecto que está en

reloj digital en javascript ke funcione en mozilla #19.

Allí puse un texto (podía ser cualquier elemento) que simulaba un 'rebote' en las paredes del contenedor, como una marquesina alternate, pero en "diagonal" (digo, para que se entienda el movimiento).
Está hecho con javascript, y le agregué un cambio de colores aleatorios cada vez que pegaba contra uno de los lados.

Como además expliqué que eso venía de otro sitio donde puse versiones hechas realmente con marquee, lo que me terminaron planteando —no en un foro, sino personalmente— es que ese tipo de 'rebote' no se hace con marquesinas, porque no tiene ningún atributo para desplazarse "a 45°". Lo que es totalmente cierto. Pero no significa que no se pueda hacer. El truco es viejísimo.

El siguiente ejemplo solamente usa JS para el cambio de colores, donde aprovecho el evento onbounce, que sí es de marquee. Lo demás es HTML.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REBOTE Y COLORES AL AZAR.</title>
<script type="text/javascript">
var paleta = new Array();
paleta[0] = ["maroon", "fuchsia", "lime", "aqua", "red"];
paleta[1] = ["fuchsia", "maroon", "olive", "aqua", "teal"];
paleta[2] = ["lime", "blue", "navy", "purple", "maroon"];
paleta[3] = ["aqua", "teal", "red", "maroon", "purple"];
paleta[4] = ["red", "teal", "navy", "purple", "olive"];
paleta[5] = ["navy", "lime", "red", "aqua", "fuchsia"];

function colores() {
var fnd0 = Math.floor(Math.random()*6);
var fnd1 = Math.ceil(Math.random()*4);

document.getElementById("horizontal").style.backgroundColor = paleta[fnd0][0];
document.getElementById("rebota").style.backgroundColor = paleta[fnd0][fnd1];

}
</script>
<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>

<marquee id="horizontal" direction="right" 
behavior="alternate" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:600px; 
background-color: white; " onbounce="colores()">
<marquee id="vertical" direction="up" behavior="alternate" 
align="down" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:150px; " onbounce="colores()"> 
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" 
>
</marquee> </marquee>

<p>Cambia colores en forma aleatoria con cada rebote.</p>
</body>
</html>

El problema con los eventos es que ya no son tan compatibles. En Chrome y Opera, por ejemplo, no lo pude hacer andar, solamente 'rebota' y no cambia de color.

Si no se entiende la animación, por las dudas, acá dejo otra versión más limpia y con capas destacadas.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>

<marquee id="horizontal" direction="right" 
behavior="alternate" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:600px; 
background-color: white; " title="Marquee horizontal.">
<marquee id="vertical" direction="up" behavior="alternate" 
align="down" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:150px;" onclick="this.style.backgroundColor='lime'" title="Marquee vertical."> 
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" 
>
</marquee> </marquee>

<p>Haciendo un click sobre la imagen se ven los límites de ambas marquesinas.</p>
</body>
</html>

Ahora sí. El tema ya quedó un poco más completo.

rzkgraphics · #13 (**permalink**) 07/12/2010, 15:48

Cita:

Iniciado por furoya

Sí, el tiempo siempre atenta contra la calidad. Igual el tema sirvió para poner varios ejemplos desarmables y estudiables.

Es más, vuelvo acá porque me parece que es el lugar ideal para responder a una objeción que me hicieron por otro efecto que está en

[url=http://www.forosdelweb.com/f13/reloj-digital-javascript-ke-funcione-mozilla-301410/#post3633809] reloj digital en javascript ke funcione en mozilla[/url] #19.

Allí puse un texto (podía ser cualquier elemento) que simulaba un 'rebote' en las paredes del contenedor, como una marquesina alternate, pero en "diagonal" (digo, para que se entienda el movimiento).
Está hecho con javascript, y le agregué un cambio de colores aleatorios cada vez que pegaba contra uno de los lados.

Como además expliqué que eso venía de otro sitio donde puse versiones hechas realmente con marquee, lo que me terminaron planteando —no en un foro, sino personalmente— es que ese tipo de 'rebote' no se hace con marquesinas, porque no tiene ningún atributo para desplazarse "a 45°". Lo que es totalmente cierto. Pero no significa que no se pueda hacer. El truco es viejísimo.

El siguiente ejemplo solamente usa JS para el cambio de colores, donde aprovecho el evento onbounce, que sí es de marquee. Lo demás es HTML.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REBOTE Y COLORES AL AZAR.</title>
<script type="text/javascript">
var paleta = new Array();
paleta[0] = ["maroon", "fuchsia", "lime", "aqua", "red"];
paleta[1] = ["fuchsia", "maroon", "olive", "aqua", "teal"];
paleta[2] = ["lime", "blue", "navy", "purple", "maroon"];
paleta[3] = ["aqua", "teal", "red", "maroon", "purple"];
paleta[4] = ["red", "teal", "navy", "purple", "olive"];
paleta[5] = ["navy", "lime", "red", "aqua", "fuchsia"];

function colores() {
var fnd0 = Math.floor(Math.random()*6);
var fnd1 = Math.ceil(Math.random()*4);

document.getElementById("horizontal").style.backgroundColor = paleta[fnd0][0];
document.getElementById("rebota").style.backgroundColor = paleta[fnd0][fnd1];

}
</script>
<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>

<marquee id="horizontal" direction="right" 
behavior="alternate" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:600px; 
background-color: white; " onbounce="colores()">
<marquee id="vertical" direction="up" behavior="alternate" 
align="down" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:150px; " onbounce="colores()"> 
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" 
>
</marquee> </marquee>

<p>Cambia colores en forma aleatoria con cada rebote.</p>
</body>
</html>

El problema con los eventos es que ya no son tan compatibles. En Chrome y Opera, por ejemplo, no lo pude hacer andar, solamente 'rebota' y no cambia de color.

Si no se entiende la animación, por las dudas, acá dejo otra versión más limpia y con capas destacadas.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>

<marquee id="horizontal" direction="right" 
behavior="alternate" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:600px; 
background-color: white; " title="Marquee horizontal.">
<marquee id="vertical" direction="up" behavior="alternate" 
align="down" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:150px;" onclick="this.style.backgroundColor='lime'" title="Marquee vertical."> 
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" 
>
</marquee> </marquee>

<p>Haciendo un click sobre la imagen se ven los límites de ambas marquesinas.</p>
</body>
</html>

Ahora sí. El tema ya quedó un poco más completo.

(: Justo un poco de la ayuda que necesito!

Hola a todos, bueno me hice un visor simple y chico para pasar unas imágenes, pero tengo algo que quisiera mejorar, y es que quisiera que las imágenes del comienzo y el final no dejen un espacio en blanco, es decir que sigan pasando juntas y repitiendose como lo hacen, pero sin ese espacio que deja al terminar de pasar la última imagen.

Código HTML:

<marquee height="101" width="590" onmouseover="this.scrollAmount='0'" scrollamount="5" onmouseout="this.scrollAmount='5'">
<a href="http://www.twitter.com/djkevinperu"><img src="http://rzkgraphics.webcindario.com/images/minibanner/3sc.gif" width="589" height="101" border="0"/></a>
<a href="http://www.twitter.com/djkevinperu"><img src="http://rzkgraphics.webcindario.com/images/minibanner/3sc.gif" width="589" height="101" border="0"/></a>
</marquee>

furoya · #14 (**permalink**) 07/12/2010, 15:54

El truco está en alguno de los enlaces. Hay que duplicar el contenido y reiniciar el desplazamiento justo cuando coincide con el comienzo.

Te conviene hacerlo con JS. Creo que algún evento de posición hay, pero para reiniciar igual hay que morir en un escript. Y sería sólo para IE.

rzkgraphics · #15 (**permalink**) 08/12/2010, 00:25

Cita:

Iniciado por furoya

El truco está en alguno de los enlaces. Hay que duplicar el contenido y reiniciar el desplazamiento justo cuando coincide con el comienzo.

Te conviene hacerlo con JS. Creo que algún evento de posición hay, pero para reiniciar igual hay que morir en un escript. Y sería sólo para IE.

Buuu estaba pensando en hacerlo con algún visor en js o jqry pero no lo hacía porque es mucho más simple hacerlo con marquee jeje así se muy antiguo x)

furoya · #16 (**permalink**) 09/12/2010, 13:23

¿Por qué insisten en que es antiguo? Si funciona, se usa.
Tu problema es que la marquesina no reinicia hasta que no pasas todo el contenido. Tienes que usar javascript simplemente porque lo que quieres hacer no se hace con marquee.

[edit]
Al final hice una versión con marquesina.
Acá la dejo.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MARQUEE SIN ESPACIOS.</title>
<script>
function reinicia(T) {

var alfa = T.parentElement.innerHTML;
T.parentElement.innerHTML = alfa;
}

</script>
<style type="text/css">

</style>
</head>
<body>
<h2>Muestra las imágenes continuadas. Para IE. </h2>

<div>
<marquee id="marq" scrollamount=60 scrolldelay=1000 width=300 
onfinish="reinicia(this)" behavior=slide bgcolor=yellow>
<span style="margin-left:-300px" ><img 
src="http://www.forosdelweb.com/images/smilies/ojotes.gif" 
width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/molesto.gif"
 width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" 
width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/enojado.gif"
 width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif"
 width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/ojotes.gif" 
width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/molesto.gif"
 width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" 
width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/enojado.gif"
 width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif"
 width="60" height="60"></span>
</marquee>
</div>
</body>
</html>

[/edit]

furoya · #17 (**permalink**) 13/12/2010, 08:46

Creo que me apuré un poco. Es cierto que la marquesina no reinicia la vuelta apenas termina la muestra, porque si el contenido es menor al ancho (en el caso de que sea horizontal) de alguna forma debería multiplicar ese contenido. Y eso es muy complejo, antes de ejecutarla, el navegador tendría que hacer medidas y "tomar decisiones" según el caso.

Pero siempre hay un truco. Es cuestión de buscar. Insisto en que estas cosas hay que hacerlas con un escript, yo lo tomo como un desafío, porque ya abrimos este tema de efectos usando marquee y me gusta completarlo. De cualquier forma, lo normal es encontrar limitaciones en algún navegador;repito, no es un método, es un truco.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; 
charset=utf-8">
<title>MARQUEE SIN ESPACIOS.</title>
<script>
function para(){
document.getElementById("marq").stop();
}

function arranca(){
document.getElementById("marq").start();
}

</script>
<style type="text/css">

</style>
</head>
<body>
<h2>Muestra las imágenes continuadas. Para IE, FF, Op. </h2>

<marquee scrollamount=2 scrolldelay=80 width=300 
height=60 bgcolor=yellow onmouseover="para()" 
onmouseout="arranca()" id="marq">
<div style="width:300px; height: 60px; white-space: nowrap; 
position: relative; background-color: silver;">
<span style="position: absolute; left:-300px;"><img 
src="http://www.forosdelweb.com/images/smilies/ojotes.gif" 
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/molesto.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" 
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/enojado.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/ojotes.gif" 
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/molesto.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" 
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/enojado.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/ojotes.gif" 
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/molesto.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/wink.gif" 
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/enojado.gif"
onclick="alert(this.src)" width="60" height="60"><img 
src="http://www.forosdelweb.com/images/smilies/biggrin.gif"
onclick="alert(this.src)" width="60" height="60"></span>
</div>
</marquee>

<p><input type="button" value="Start" onClick="arranca();">
<input type="button" value="Stop" onClick="para();"></p>

</body>
</html>

En Chrome (al menos) no anda. El escript es solamente para el efecto de "Start" / "Stop", no afecta a lo que estás pidiendo.

Correción : MARQUEE