O como poner una marquesina con nuestros enlaces favoritos, imágenes, texto, etc.
Se trata de usar la etiqueta marquee para incluir dentro los elementos html que queramos. Esta instrucción muestra un recuadro y lo que se coloca dentro de él, se muestra haciendo un scroll (desplazamiento). En este caso se ha configurado hacia arriba.
Además hemos añadido un onmouseover para detener el scroll cuando se pase el puntero por encima del contenido y un onmouseout para restaurarlo. Este sería el resultado:
La instrucción marquee no es totalmente compatible con Firefox. Habrá que hacer pruebas según lo que queramos. Por ejemplo, para regular el ancho para IE, sólo hace falta ponerlo como atributo en el propio marquee. Sin embargo, para Firefox, hay que colocarlo dentro de una etiqueta adicional style, tal y como se ve en el código del ejemplo. El efecto scroll también varía de un navegador a otro.
Se trata de usar la etiqueta marquee para incluir dentro los elementos html que queramos. Esta instrucción muestra un recuadro y lo que se coloca dentro de él, se muestra haciendo un scroll (desplazamiento). En este caso se ha configurado hacia arriba.
Además hemos añadido un onmouseover para detener el scroll cuando se pase el puntero por encima del contenido y un onmouseout para restaurarlo. Este sería el resultado:
<table align="center" width="200" height="200" border=2><tr><td><marquee onmouseout="this.start()" direction="up" height="200" onmouseover="this.stop()" scrollamount="2">
Dentro puedes escribir un simple texto que irá desplazándose como éste,
una colección de imágenes como éstas:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBqMVoWl1YQ2Ig-6PT0krWuRvYqHMkK306hz011oEIFQelzsB6Nt6kKfW-thZxGSBh8ZVqcoRJ7NjRu8Sq_FVZY7__GCZF4DRTzM_vkidmCO11hzkmrGHw5RSuOEyN5b9EDQh6Q48Hi56/s1600/JUANITO-3.png" width="150" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYN0eFQJFL5hSNfy-Db0aVJFudFJGoHOvPkfr3Mk2wiPqsUBVJJU8NDa0dkDO_RenK5JUTE-eYbfaEAX6IKDFzzk8BUpQj1waDbtsCEbPuirhF9OSEK8jG4Av9xInBmC3vH1Y_sMLtpJB/s1600/milagros.jpg" width="150" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMcDQj4fd6F6w9VLdgiUob4D9xZDkWV6NA_gzaKfq03As6o1FXRw2xYoT0dkT0Vg-zYCBfsW4wz4zpPmNFzlMAdrsun3mzjZdWkcZZPe6-vdsT1L15pJ3bF56HyA3XP8ZaYXtO8A7M-vI_/s1600/ANTONIO-PNG-B1.png" width="150" />
o incluso enlaces:
<a href="http://oloman-cosicas.blogspot.com/">Cosicas</a>
<a href="http://olografias.blogspot.com/">Olografias</a>
<a href="http://olojuegos.blogspot.com/">Olojuegos</a>
</marquee></td></tr></table>
Dentro puedes escribir un simple texto que irá desplazándose como éste,
una colección de imágenes como éstas:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBqMVoWl1YQ2Ig-6PT0krWuRvYqHMkK306hz011oEIFQelzsB6Nt6kKfW-thZxGSBh8ZVqcoRJ7NjRu8Sq_FVZY7__GCZF4DRTzM_vkidmCO11hzkmrGHw5RSuOEyN5b9EDQh6Q48Hi56/s1600/JUANITO-3.png" width="150" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYN0eFQJFL5hSNfy-Db0aVJFudFJGoHOvPkfr3Mk2wiPqsUBVJJU8NDa0dkDO_RenK5JUTE-eYbfaEAX6IKDFzzk8BUpQj1waDbtsCEbPuirhF9OSEK8jG4Av9xInBmC3vH1Y_sMLtpJB/s1600/milagros.jpg" width="150" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMcDQj4fd6F6w9VLdgiUob4D9xZDkWV6NA_gzaKfq03As6o1FXRw2xYoT0dkT0Vg-zYCBfsW4wz4zpPmNFzlMAdrsun3mzjZdWkcZZPe6-vdsT1L15pJ3bF56HyA3XP8ZaYXtO8A7M-vI_/s1600/ANTONIO-PNG-B1.png" width="150" />
o incluso enlaces:
<a href="http://oloman-cosicas.blogspot.com/">Cosicas</a>
<a href="http://olografias.blogspot.com/">Olografias</a>
<a href="http://olojuegos.blogspot.com/">Olojuegos</a>
</marquee></td></tr></table>
La instrucción marquee no es totalmente compatible con Firefox. Habrá que hacer pruebas según lo que queramos. Por ejemplo, para regular el ancho para IE, sólo hace falta ponerlo como atributo en el propio marquee. Sin embargo, para Firefox, hay que colocarlo dentro de una etiqueta adicional style, tal y como se ve en el código del ejemplo. El efecto scroll también varía de un navegador a otro.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Holaaaa!!!
ResponderEliminarSiempre sorprendiendome con tus trucos maravillosos, tu blogg, cada dia mas bonito, felicidades.
Saludos
Gracias Denise. La verdad es que ya hago pocas modificaciones en la plantilla, porque casi, casi está ya a mi gusto.
ResponderEliminarAl tuyo le he echado un vistazo y he comprobado que también lo has modificado bastante. Supongo que también estarás cerca de conseguir el mismo objetivo.
Un saludo
Hola!!
ResponderEliminarMi pregunta en concreto es saber si puedo agregar un "background con imagen" y como lo declararia...
Muchas Gracias Oloman
Ya está puesto un fondo-imagen.
ResponderEliminarTienes que añadir a la etiqueta TABLE un atributo STYLE con el fondo:
<table width="200" style="background:url(DIRECCION_IMAGEN);" align="center"... ETC.
Hola Oloman, otra vez. Mi pregunta es la siguiente: se puede hacer esta marquesina con las imagenes de un album de picassa? Ahora mismo tengo una presentación de imágenes de un album picassa, pero me gustaría pasarlo a una marquesina en hornizontal debajo de la cabecera.
ResponderEliminarUn saludo!
también me gustaría que las imágenes pasaran continuamente, sin ninguna interrupción (osea, que cuando pase la última imagen, pegada a continuación pase la primera. Y por último que, cuando se cargue la página, no se vea el hueco del gadget en blanco, sino que aparezcan las imagenes ya moviéndose.
ResponderEliminarNo se si me explico bien ni si serán posibles todas estas cosas.
UN SALUDO!
Contestada la pregunta con un post de hoy Moblelar...
ResponderEliminarGenial!
ResponderEliminartan sencillo y tan útil!
Hola!!
ResponderEliminar¿y para cambiarle el tipo de letra y el color como haria?
xD
un saludo
Ani, igual que en el comentario #5, incluyendo una etiqueta STYLE. En tu caso con un font-family:loquesea;color:#xxxxxx; (el que sea también)
ResponderEliminarHola de nuevo :(
ResponderEliminarDespues de darle muchas vueltas a la cabeza he decidido usar este sistema para poner todos mis afiliados, lo he probado en mi blog de prueba primero y me pasa lo siguiente. Que cuando la primera imagen llega arriba impediatamente vuelve a empezar y no pasan el resto de imagenes...¿como puedo solucionarlo? o si me puedes dar tu un consejillo para poder poner todos los afiliados juntos, ya que los quiero quitar de los laterales de mi blog....
gracias por tener tanta paciencia con los que no sabemos tanto de esto...
saludos
Ani, no te comas mucho el coco con esto que no sé por qué, pero unas veces funciona bien y otras no.
ResponderEliminarA ver si te sirviera este otro truco que funciona perfectamente.
Hola oloman, no encuentro, en tu sitio la solucion para la pregunta de como hacer para que el blogroll las imagenes pasaran continuamente sin el espacio, cual es el post?
ResponderEliminarah y otra pregunta, donde consigo un buscador interno que tome en cuenta los tags, saludos
Edgar, no sé a qué espacio te refieres y sobre lo del buscador interno, no conozco ningún buscador que haga eso.
ResponderEliminarHola gracias por la respuesta Oloman, me refiero a lo mismo que te pregunto moblebar, pregunta 7, cuando va pasando la informacion en el blogroll, pasa la ultima información y luego se interrumpe y vuelve a comenzar, si no hay un truco para que pasaran seguidas, la ultima pegada de la primera.
ResponderEliminarsaludos
excelente blog
Como también contesto por otro lado, lo de MARQUEE no funciona del todo bien. Por ahí leí que no era un stándar.
ResponderEliminarLa alternativa que di está explicada en esta otra entrada:
http://oloblogger.blogspot.com/2009/09/imagenes-rotativas.html
De momento no tengo otra.
gracias Oloman, eso buscaba precisamente. aqui he resuelto todas mis dudas.
ResponderEliminarsaludos