Creación dun bloque de "novas" con texto deslizante
Podemos crear un novo bloque que mostre un texto deslizante, de maneira que o texto apareza pola parte inferior do bloque e vaia deslizándose ata desaparecer de forma progresiva pola parte superior.
Este tipo de efectos é utilizado na web para mostrar novas, avisos, anuncios ou calquera outra información que se desexa destacar de forma especial.
Para acadar este efecto utilizaremos un determinado código HTML en combinación con código JavaScript. En concreto, usaremos as funcionalidades da etiqueta "marquee" (código HTML).
A etiqueta "marquee" é un elemento propietario (de Microsoft) polo que algúns navegadores como "Mozilla Firefox" teñen dificultades para interpretala correctamente.
Ésta é a razón pola que acosellamos combinar o elemento "marquee" (código HTML) con outro código JavaScript que o faga compatible con tódolos navegadores.
Procedemento:
1.- Imos ao menú "Administrar - Construcción da páxina - Bloques"2.- Na parte superior desta pantalla, pulsamos a pestana "Engadir bloque"
3.- No campo "Descrición do bloque" escribimos unha frase significativa, por exemplo "Bloque de novas"
4.- Na parte inferior do campo "Corpo do bloque" pulsamos o enlace "Disable rich-text"
5.- Dentro do campo "Corpo do bloque" introducimos o seguinte código:
<SCRIPT LANGUAGE="JavaScript">
document.write('<marquee id="texto-deslizante" direction="up" width="100%" height="80" scrollamount="2" scrolldelay="100">');
document.write('<font size="4" face="Arial" color="black">');
document.write('Primeira frase do texto deslizante <br>');
document.write('Segunda frase do texto deslizante <br>');
document.write('</font>');document.write('</marquee>');
</script>
Na imaxe inferior podemos ver o código xa introducido no campo "Corpo do bloque", cunha pequena explicación da funcionalidade do código.
6.- Pulsamos o botón "Garda-lo bloque"
7.- Este bloque aparecerá inicialmente na sección de bloques desactivados, polo que a continuación procederemos a seleccionar unha "rexión" para mostrar o bloque (por exemplo "barra lateral dereita") e un "peso" como criterio de ordenación vertical.
8.- Pulsamos o botón "Garda-los bloques"
Finalmente, se queremos que o bloque mostre un título (igual que os demáis bloques) deberemos volver a "Administrar - Construcción da páxina - Bloques, pulsaremos sobre a opción "configurar" do propio bloque e introducimos un título no campo "Título do bloque"
Para rematar, volveremos a pulsar o botón "Garda-lo bloque"
Para insertar unha imaxe:(a modificación do código móstrase en vermello)
<SCRIPT LANGUAGE="JavaScript">
document.write('<marquee id="texto-deslizante" direction="up" width="100%" height="80" scrollamount="2" scrolldelay="100">');
document.write('<font size="4" face="Arial" color="black">');
document.write('Primeira frase do texto deslizante <br>');
document.write('Segunda frase do texto deslizante <br>');
document.write('<Div align="center"><img src="http://www.edu.xunta.gal/centros/imaxes_dw/drupal.png"></div>');
document.write('</font>');document.write('</marquee>');
</script>
NOTA: Debes cambiar a ruta "http://www.edu.xunta.gal/centros/imaxes_dw/drupal.png" pola ruta onde se atope a túa imaxe
Para insertar un enlace: (a modificación do código móstrase en vermello)
<SCRIPT LANGUAGE="JavaScript">
document.write('<marquee id="texto-deslizante" direction="up" width="100%" height="80" scrollamount="2" scrolldelay="100">');
document.write('<font size="4" face="Arial" color="black">');
document.write('Primeira frase do texto deslizante <br>');
document.write('Segunda frase do texto deslizante <br>');
document.write('<Div align="left"> <a href="http://www.google.es" target="_blank"> GOOGLE</a></div>');
document.write('</font>');document.write('</marquee>');
</script>
NOTA: Debes cambiar a ruta "http://www.google.es" polo enderezo URL que queiras mostrar, e a palabra GOOGLE polo título da páxina que corresponde a ese enderezo.
Parar o movemento cando se sitúa o rato enriba(a modificación do código móstrase en vermello)
<SCRIPT LANGUAGE="JavaScript">
document.write('<marquee id="texto-deslizante" direction="up" width="100%" height="80" scrollamount="2" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()">');
document.write('<font size="4" face="Arial" color="black">');
document.write('Primeira frase do texto deslizante <br>');
document.write('Segunda frase do texto deslizante <br>');
document.write('</font>');document.write('</marquee>');
</script>