Testo e immagini scorrevoli da mostrare in un sito

Come usare il tag marquee per inserire testo, immagini e link scorrevoli in una pagina web impostandone velocità, direzione e altri parametri

Nell'HTML esiste il tag <marquee> che serve per far scorrere testo e immagini; il testo può anche essere formattato e si può impostare la velocità di scorrimento e il suo verso scegliendo una delle quattro direzioni.

In realtà il tag <marquee> è stato deprecato dal consorzio W3C, l'istituzione che si occupa della purezza del linguaggio di programmazione, svolgendo una attività che ha delle similitudini con quello che fa l'Accademia della Crusca nei confronti della lingua italiana. 

Sebbene deprecato, il tag <marquee> continua a essere usato regolarmente dagli webmaster di tutto il mondo per la sua semplicità d'uso e, quello che è più importante, viene regolarmente supportato da tutti i browser.

Abbiamo già visto alcune applicazioni di tale tag quali quella per aggiungere i titoli scorrevoli alla fine di un video, con lo stesso stile dei crediti di attribuzione che si vedono al cinema. In un prossimo articolo vedremo invece come creare un widget che mostri gli ultimi titoli del sito che scorrono dal basso verso l'alto.

Il lettore potrà cliccarci sopra e lo scorrimento potrà essere mostrato anche all'interno di una pagina statica. In questo post darò delle informazioni generali su come usare il tag marquee e sugli attributi attributi supportati per personalizzarne il comportamento e l'aspetto.

1) DEFAULT

Il codice di base per l'utilizz0 del tag <marquee> è il seguente:

<marquee> Scritta che scorre da destra verso sinistra </marquee>

Se incollato in modalità HTML, mostrerà il testo del tag che, partendo dalla destra, si sposterà verso sinistra. Per verificarlo potete incollare questo e gli altri codici del post in un Editor HTML Online.

2) ATTRIBUTO BEHAVIOR

Con tale attributo si può settare il tipo di scorrimento. Behavior può prendere i valori scroll, slide o alternate. Scroll è il comportamento di default che mostra lo scorrimento classico, che inizia di nuovo quando il contenuto è scomparso dalla vista. Alternate inverte lo scorrimento; una volta da sinistra a destra e l'altra volta da destra a sinistra. Infine Slide che mostra lo scorrimento una sola volta dopodiché il contenuto, testo o immagine, si visualizza fisso. Per esempio con questo codice

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

il testo scorrerà da destra a sinistra per poi invertire la direzione di scorrimento.

3) ATTRIBUTO BGCOLOR

Si tratta di un attributo che specifica il colore dello sfondo dell'area in cui si svolge lo scorrimento.

<marquee bgcolor="#ddf"> Questa scritta si sposta da destra a sinistra su sfondo con colore di codice #ddf </marquee>

L'attributo va inserito con i codici dei colori esadecimali. 

4) ATTRIBUTO DIRECTION

Si tratta dell'attributo che determina la direzione dello scorrimento. I valori che può prendere tale attributo sono left (quella di default), right, up e down. Lo scorrimento risultante sarà rispettivamente verso sinistra, verso destra, verso l'alto e verso il basso. Tanto per fare un esempio, questo codice

<marquee direction="right"> Questo testo scorre da sinistra verso destra </marquee>

farà scorrere il testo da sinistra verso destra.

5) ATTRIBUTO HEIGHT

Con l'attributo height si può impostare l'altezza del marquee che può essere espressa in pixel o percentuale.

<marquee direction="right" height="30px" bgcolor="#def"> <span style="font-size:24px;">Questo testo di dimensione 24px scorre da sinistra verso destra in uno sfondo con colore #def alto 30 pixel</span> </marquee>

Al posto del testo piano si può anche inserire anche un testo formattato, in questo caso con il tag <span>.

6) ATTRIBUTO WIDTH

Con width si imposta la larghezza dell'area dello scorrimento in pixel o in percentuale. È un attributo che si utilizza per confinare lo scorrimento in una determinata area dello schermo. Con questo codice di esempio

<marquee direction="right" width="50%" height="30px" bgcolor="#def"> <span style="font-size:24px; font-weight:bold; font-family:Verdana;">Questo testo in grassetto di 24 pixel con caratteri Verdana scorre verso destra in uno sfondo colorato alto 30 pixel e prenderà solo la metà della larghezza del layout</span> </marquee>

si visualizzerà un testo formattato in grassetto che scorre da sinistra verso destra solo per la metà del layout.

7) ATTRIBUTO HSPACE

L'attributo hspace in un certo senso è analogo all'attributo padding, perché determina lo spazio senza scorrimento ai due lati dell'area del layout. Con questo codice di esempio

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

vengono lasciati 100 pixel senza scorrimento a destra e a sinistra. Utile quando s usa il tag marquee insieme a una immagine, in modo che quest'ultima non nasconda parte del testo scorrevole.

8) ATTRIBUTO SCROLLAMOUNT

Con l'attributo scrollamount si imposta la velocità dello scorrimento. Il suo valore è numerico e indica il numero dei pixel che si sposteranno nell'unità di tempo. Impostando scrollamount="100" ci sarà una velocità doppia rispetto alla impostazione di scrollamount="50". Nel primo caso ci sarà uno scorrimento di 100 pixel per ogni secondo. Con questo codice di esempio

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

il testo si sposterà da destra a sinistra alla velocità di 25 pixel al secondo.

9) ATTRIBUTO VSPACE

L'attributo vspace è l'analogo di hspace per le distanze verticali.  Imposta cioè la distanza del marquee dai bordi superiori e inferiori. Mentre hspace si usa per le direzioni left e right, il vspace è utile da usare solo con le direzioni up e down. Per esempio con il codice seguente

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

avremo un testo che si sposta dal basso verso l'alto, ma che lascerà senza scorrimento 100 pixel in alto e in basso.

10) ATTRIBUTI ONMOUSEOVER E ONMOUSEOUT

Gli attributi onmouseover="this.stop()" e onmouseout="this.start()" si usano per bloccare lo scorrimento e per farlo riprendere quando si pone il mouse sul contenuto che scorre. Con questo codice di esempio

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

si permette al lettore di interagire con lo scorrimento, fermandolo e facendolo ripartire con il cursore.

11) ATTRIBUTO LOOP

Il loop è la ripetizione di un evento e il suo valore permette di impostare il numero di scorrimenti che deve compiere un contenuto all'interno del tag marquee. Senza tale attributo lo scorrimento è infinito. Con questo codice

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

la scritta dopo 8 scorrimenti di fermerà.

12) ATTRIBUTO SCROLLDELAY

L'attributo scrolldelay è un altro attributo per impostare la velocità di scorrimento del contenuto.  Il valore di scrolldelay imposta il numero di millisecondi fra ciascuno dei successivi spostamenti del testo. Viene usato insieme a scrollamount per impostare velocità di scorrimento. Esempio di codice:

<marquee scrollamount="20" scrolldelay="1" > Questa scritta scorrerà a velocità di 20 pixel al secondo con intervallo di 1 millisecondo tra ciascun spostamento</marquee>

Questo attributo va usato con parsimonia  anzi sconsiglio di utilizzarlo perché poco utile.

APPLICAZIONE DEL TAG MARQUEE

Ecco un esempio classico del tag marquee. Se per esempio incolliamo subito sopra alla riga </body> del Tema di Blogger il codice seguente, per poi salvare il template,

<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 visualizzerà una GIF animata della slitta di Babbo Natale della larghezza di 175 pixel, che scorrerà nella parte alta del blog, da destra verso sinistra, e che si arresterà dopo tre passaggi. Il suo aspetto sarà simile a questo:

Concludo ricordando che le virgolette doppie (") possono essere sostituite da quella singola ('). L'importante è non usarle per lo stesso attributo. Nel prossimo post vedremo una applicazione del tag marquee in un widget.