Testo scorrevole verticalmente stile Flash
Scritto da Alberto Giuliani
(http://www.agwebsolutions.it/)
il 02 agosto 2005
Salviamo la pagina e vediamo il risultato.
Il nostro testo scorrerà verticalmente verso l'alto, avrà un allineamento centrato, e si fermerà al passaggio del mouse.
Ora vediamo in dettaglio il codice, spiegando i singoli attributi.
- Onmouseover=this.stop() fa in modo che al passaggio del mouse lo scorrimento si blocchi;
- Onmouseout=this.start() fa in modo che lo scorrimento riprenda quando il cursore del mouse si allontana;
- ScrollDelay indica la velocità di scorrimento del testo; per una buona visualizzazione ed una facile lettura, consigliamo di mantenerlo attorno a 20-25;
- Direction indica la direzione in cui scorre il testo; nel nostro esempio è UP, ma possiamo anche settare DOWN, LEFT, RIGHT, a seconda delle nostre esigenze e preferenze.
- Height setta l'altezza che occuperà lo scroller nella pagina;
- Width è il parametro che imposta la larghezza che occuperà lo scroller nella pagina.
- Align indica l'allineamento del testo scorrevole; nel nostro esempio è CENTER, ma possiamo settare LEFT, RIGHT, JUSTIFY.
- 'Qui il testo scorrevole' è il testo di esempio; potete inserire anche TAGs HTML; per andare a capo è consigliato il TAG <br> (o <br /> a seconda che lavoriate con HTML o XHTML).
Quindi i parametri dell'esempio vengono a creare un rettangolo di altezza 252 e larghezza 122, con il testo all'interno centrato, una velocità di scorrimento pari a 20 e uno scorrimento verso l'alto.
Questo codice può essere impiegato nel caso in cui si possieda una newboard e si voglia far scorrere le news recenti. Molti siti adottano questo sistema, magari con un codice Flash, che noi abbiamo semplificato, non perdendo però la qualità del risultato.
Altrimenti potrebbe essere utilizzato per mettere in risalto un servizio o un argomento nel menu di un sito. Interessante e pratico è uno scorrimento del genere in un menu laterale. Sicuramente garantisce visibilità al suo contenuto.
Con l'aiuto dei CSS potremmo personalizzare la cosa, ottenendo un effetto come nella pagina raggiungibile a questo link, in cui lo scrolling è in un riquadro, simile ad un post-it, posto sul menu.
Ricordiamoci che all'interno dello scrolling possiamo inserire anche codice HTML, quindi a scorrere potrebbe essere un'immagine, o un testo elaborato graficamente.
Numerose sono quindi le possibilità di impiego di questo codice, abbiamo l'imbarazzo della scelta.
Questo è quindi un esempio di come combinando linguaggi come HTML, DHTML, CSS tra loro si possano ottenere effetti simili a Flash.
Per far sì che il testo scorra lateralmente, basta usare un comunissimo <marquee> e </marquee>.
Ci occuperemo invece nel dettaglio di un testo scorrevole verticalmente, che, al passaggio del mouse, si arresta, e riprende il suo scorrimento quando il puntatore si sposta da esso. Se poi lo mettete in una tabella con una cornice grafica carina, sembrerà che si tratti di una mininewsboard in flash, e dar? al vostro sito un tocco di classe.
Ecco il codice da inserire nel punto del <body> in cui volete che compaia il testo:
CODICE
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollAmount="1" scrollDelay="20" direction="up" height="252" align="center" width="122"> Qui il testo scorrevole... prova... bla... bla... </marquee>
Salviamo la pagina e vediamo il risultato.
Il nostro testo scorrerà verticalmente verso l'alto, avrà un allineamento centrato, e si fermerà al passaggio del mouse.
Ora vediamo in dettaglio il codice, spiegando i singoli attributi.
- Onmouseover=this.stop() fa in modo che al passaggio del mouse lo scorrimento si blocchi;
- Onmouseout=this.start() fa in modo che lo scorrimento riprenda quando il cursore del mouse si allontana;
- ScrollDelay indica la velocità di scorrimento del testo; per una buona visualizzazione ed una facile lettura, consigliamo di mantenerlo attorno a 20-25;
- Direction indica la direzione in cui scorre il testo; nel nostro esempio è UP, ma possiamo anche settare DOWN, LEFT, RIGHT, a seconda delle nostre esigenze e preferenze.
- Height setta l'altezza che occuperà lo scroller nella pagina;
- Width è il parametro che imposta la larghezza che occuperà lo scroller nella pagina.
- Align indica l'allineamento del testo scorrevole; nel nostro esempio è CENTER, ma possiamo settare LEFT, RIGHT, JUSTIFY.
- 'Qui il testo scorrevole' è il testo di esempio; potete inserire anche TAGs HTML; per andare a capo è consigliato il TAG <br> (o <br /> a seconda che lavoriate con HTML o XHTML).
Quindi i parametri dell'esempio vengono a creare un rettangolo di altezza 252 e larghezza 122, con il testo all'interno centrato, una velocità di scorrimento pari a 20 e uno scorrimento verso l'alto.
Questo codice può essere impiegato nel caso in cui si possieda una newboard e si voglia far scorrere le news recenti. Molti siti adottano questo sistema, magari con un codice Flash, che noi abbiamo semplificato, non perdendo però la qualità del risultato.
Altrimenti potrebbe essere utilizzato per mettere in risalto un servizio o un argomento nel menu di un sito. Interessante e pratico è uno scorrimento del genere in un menu laterale. Sicuramente garantisce visibilità al suo contenuto.
Con l'aiuto dei CSS potremmo personalizzare la cosa, ottenendo un effetto come nella pagina raggiungibile a questo link, in cui lo scrolling è in un riquadro, simile ad un post-it, posto sul menu.
Ricordiamoci che all'interno dello scrolling possiamo inserire anche codice HTML, quindi a scorrere potrebbe essere un'immagine, o un testo elaborato graficamente.
Numerose sono quindi le possibilità di impiego di questo codice, abbiamo l'imbarazzo della scelta.
Questo è quindi un esempio di come combinando linguaggi come HTML, DHTML, CSS tra loro si possano ottenere effetti simili a Flash.
