Come mostrare scritte o immagini scorrevole con l'HTML.

Come mostrare in una pagina web del testo anche formattato o delle immagini scorrevoli utilizzando il tag marquee e i suoi attributi.

Ho appena ricevuto un messaggio su un post di genere natalizio che avevo scritto qualche anno fa. Si tratta di una slitta di Babbo Natale che si sposta orizzontalmente per il blog e in cui mi si chiedeva se fosse possibile mostrare lo scorrimento una sola volta.

In realtà si può fare molto di più perché si può decidere anche quante volte si deve far scorrere una immagine o un testo prima di interromperlo.

Per questa funzionalità si utilizza il tag <marquee> che non è stato mai riconosciuto dal W3C che è l'organismo che sovrintende ai linguaggi di programmazione ma che viene rilevato da tutti i principali browser. Il tag <marquee> ha bisogno del tag di chiusura </marquee> e mostra il contenuto tra questi due tag in modo scorrevole. Si possono aggiungere diversi attributi per personalizzare tale scorrimento.

ATTRIBUTI DEL TAG MARQUEE

1) behavior può prendere i valori scroll, slide o alternate. Scroll è il comportamento di default che mostra lo scorrimento che poi inizia nuovamente quando il contenuto è scomparso. Alternate inverte lo scorrimento una volta da sinistra a destra e l'altra volta da destra a sinistra. Slide mostra lo scorrimento una sola volta dopodiché il contenuto, testo o immagine, si visualizza fisso.

<marquee behavior='alternate'> Scritta che scorre da destra verso sinistra e poi  al contrario </marquee>

Per controllare questo codice di esempio e dei successivi incollatelo nella pagina del Real Time Editor.

2) bgcolor è un attributo che specifica il colore dello sfondo da usare con i codici dei colori.

<marquee bgcolor="#ddddff"> Questa scritta si muove su sfondo colorato </marquee>

3) direction è l'attributo che determina la direzione dello scorrimento. Ci possono essere 4 direzioni: left (quella di default), right, up e down. Lo scorrimento sarà rispettivamente verso sinistra, verso destra, verso l'alto o verso il basso. Esempio

<marquee direction='right'> Questo testo scorre verso destra </marquee>

4) height ò l'attributo che determina l'altezza del marquee e che può essere espresso in pixel o in percentuale rispetto all'altezza di tutto lo schermo. Esempio:

<marquee direction='right' height='30px' bgcolor='#ddddff'> Questo testo scorre verso destra in uno sfondo colorato alto 30 pixel </marquee>

5) width indica la larghezza del marquee e può essere espresso in pixel o in percentuale. È un attributo che si utilizza per confinare lo scorrimento in una determinata area dello schermo. Es:

<marquee direction='right' width='50%' height='30px' bgcolor='#ddddff'> Questo testo scorre verso destra in uno sfondo colorato alto 30 pixel e prenderà solo la metà della larghezza </marquee>

6) hspace è analogo al padding sotto certi aspetti perché serve per determinare lo spazio senza scorrimento ai due lati. Viene espresso con un numero che indica i pixel

<marquee hspace="200"> Questo testo scorre lasciando 200 pixel di spazio liberi a sinistra e a destra</marquee>

7) scrollamount determina la velocità di scorrimento. Ha un valore numerico e indica i pixel che si sposteranno nell'unità di tempo. Impostando scrollamount="50" ci sarà una velocità doppia rispetto alla impostazione di scrollamount="25". Esempio:

<marquee scrollamount="25"> Questo testo si sposterà alla velocità di 25 pixel </marquee>

8) vspace è l'analogo di hspace per le distanze verticali. Imposta cioè la distanza del marquee dai bordi superiori e inferiori. È utile usarlo con le direzioni up o down. Esempio:

<marquee direction='up' scrollamount="25" height='500px' vspace='100'> Questo testo si sposterà in alto e lascerà 100 pixel di spazio </marquee>

9) onmouseover="this.stop()"  - La scritta viene fermata quando si punta il testo con il mouse

10) onmouseout="this.start()"  - La scritta ricomincia a scorrere quando il mouse non è sulla scritta sono due comandi che servono per interagire con la scritta. Esempio:

<marquee onmouseover="this.stop()"  onmouseout="this.start()" > Questo testo si ferma quando ci si passa sopra con il mouse e riparte quando si toglie</marquee> 

11) loop è l'attributo che serve per configurare il numero di scorrimenti del contenuto. Se si imposta loop="4" la scritta scorrerà per quattro volte. Senza l'attributo loop lo farà invece infinite volte.

<marquee loop="5"> Questa scritta scorrerà per 5 volte</marquee> 

12) scrolldelay è un altro attributo per la velocità di scorrimento del testo. A numeri maggiori corrisponde una velocità inferiore. Esempio:

<marquee scrolldelay="10" loop="5"> Questa scritta scorrerà per 5 volte a velocità 10</marquee>

CONTENUTI PIÙ COMPLESSI

All'interno del tag marquee si possono inserire anche codici di un testo formattato con grassetto, corsivo e collegamenti. Si possono anche inserire delle immagini. Ritornando al tema di inizio post per mostrare lo scorrimento solo un determinato numero di volte consideriamo questo codice

<marquee scrollamount="20" onmouseover="this.stop()"  onmouseout="this.start()" loop="3" style='position:fixed; top:0; right:0; z-index:1000; width:100%;'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXSgzSU6bDCgSV2Ug9j6Dn99qZLl3xsbcB-G6NXKjHGZwzXrWKevyss8kNODwTXK7pCERJuG0FIZpgviaELt_hbISoRul10oA8dyD5jDBM9qCdhNs0F-E164aFFsQ7uf4Hb_tnC3F4_8/s350/slitta-babbo-natale.gif' border="0" width="175"/></marquee>

Si tratta della Slitta di Babbo Natale che scorrerà nella parte alta del blog e che potrà essere fermata ponendoci il cursore sopra. Tale codice andrà incollato subito sopra al tag </body> del modello di Blogger. Mostrerà solo 3 scorrimenti (loop="3"). Il suo aspetto sarà simile a questo 

Il codice precedente è solo un esempio di come utilizzare il tag <marquee>.