Come mostrare delle scritte o delle immagini scorrevoli.

Come inserire nelle pagine web delle scritte scorrevoli usando il tag marquee o il javascript.

Le scritte che scorrono sono un arricchimento dei contenuti in quanto li evidenziano catturando lo sguardo dei lettori. Possono essere usate per dei widget o anche per semplici annunci di testo. Tutti i browser supportano il tag marquee che è quello specifico per creare questi effetti. Si tratta di un elemento che è stato deprecato dal W3C come non conforme e obsoleto ma l'importante è che i lettori riescano a visualizzare gli effetti che produce. Ho già presentato dei widget che utilizzano questo tag come quello sugli Ultimi Post e i Commenti Recenti Scorrevoli. Adesso analizziamo questa personalizzazione in modo più generale da usare per degli avvisi ai lettori, per ricordare un evento, per una festività, per un augurio di compleanno o per far muovere una immagine.

Il codice utilizzato può essere incollato sia in un post in Modalità HTML sia in un gadget HTML/Javascript. Per esempio incollando questo semplice HTML

<div align="center"><marquee onmouseover="this.stop()" direction="Left" scrollamount="5" onmouseout="this.start()" width="400" style="font-size: 20pt; font-weight:bold; color: #036; font-family: Georgia;"  height="40" bgcolor="#FDA">Scritta scorrevole colorata</marquee></div>

otterremo questo risultato

Scritta scorrevole colorata

Si possono modificare i parametri come si vuole seguendo queste istruzioni:

1. onmouseover="this.stop()"  - La scritta viene fermata quando si punta il testo con il mouse (questo tag può essere tolto se non si vuole che si fermi)
2. onmouseout="this.start()"  - La scritta ricomincia a scorrere quando il mouse non si trova più sulla scritta (anche questo tag può essere tolto).
3. Left – è la direzione iniziale; con Up la scritta andrà in alto (si possono usare anche Right e Down)
4. scrollamount ="5" – rappresenta la velocità di scorrimento (p.e. con 10 la velocità aumenterà)
5. behavior="alternate" – scorre da sinistra a destra e poi da destra a sinistra alternativamente (opzionale). Se si utilizza è meglio optare per una larghezza in valore proporzionale (p.e. 100%)
6. width="400" – è la larghezza dello spostamento misurata in pixel. Si possono usare anche i valori percentuali del tipo width="85%" 
7. font-size: 18pt; - Dimensione del carattere
8. color: #036; - Codice del colore del carattere
9. font-family:Georgia; - Famiglia di font
10. height="40" - Altezza in pixel della scritta
11. bgcolor="#FDA" - Codice del colore dello sfondo

Oltre che del testo possono anche essere inserite delle immagini da sole oppure insieme in questo modo

<div align="center"><marquee onmouseover="this.stop()" direction="Left" scrollamount="5" onmouseout="this.start()" width="400" style="font-size: 20pt; font-weight:bold; color: #036; font-family: Georgia;" height="40" bgcolor="#FDA">Scritta scorrevole colorata <img style="width:30" src="URL_IMMAGINE"/></marquee></div>

dove il testo visualizzato è colorato di blu mentre l'URL della immagine è colorato di rosso.

COME INSERIRE MESSAGGI SCORREVOLI CON IL JAVASCRIPT

Invece che il tag marquee si può usare il javascript per creare delle scritte scorrevoli. In questo caso si può agire sul modello. Dopo aver salvato il template si va su Modello > Modifica HTML e con Ctrl+F si cerca la riga </head>. Subito sopra si incolla questo codice

<script language='JavaScript'>
//<![CDATA[
var testo= "MESSAGGI IMPORTANTI" // PRIMO TESTO
var message= new initArray("PRIMO MESSAGGIO SECONDO MESSAGGIO TERZO MESSAGGIO QUARTO MESSAGGIO"); // GLI ALTRI MESSAGGI
var lentxt= testo.length;
var width_IPCEI= 100;
var count_IPCEI= 14;
var count= width_IPCEI+lentxt;
var nmsg=1;
function initArray() {
  this.length= initArray.arguments.length
  for (var i= 0; i < this.length; i++)
  this[i+1]= initArray.arguments[i]
}
function shift() {
  var outtxt= ""
  var  dif= count-lentxt;
  if (dif>0) {
    for (var i= 1; i<=dif; i++) {
      outtxt= outtxt+" "}
    outtxt= outtxt+testo.substring(0,width_IPCEI-dif)
  }
  else {
    outtxt= testo.substring(-dif,lentxt)
  }
  document.form_IPCEI.text_IPCEI.value= outtxt
}
function scorrimento() {
  var n_IPCEI;
  if ((count_IPCEI>0) && (count-lentxt==0)) {count=0}
  if (count-->0) {
    shift();
    setTimeout("scorrimento()",70) // VELOCITA
  }
  else {
    if (count_IPCEI-->0) {
      if ((count_IPCEI % 2)==0) {
        document.form_IPCEI.text_IPCEI.value= " "
        setTimeout("scorrimento()",300)
        }
      else {
        document.form_IPCEI.text_IPCEI.value= testo;
        if (count_IPCEI==1) {
          setTimeout("scorrimento()",3000)} // DURATA DELLA PRIMA SCRITTA
        else {
          setTimeout("scorrimento()",300)}
      }
    }
    else {
      now= new Date();
      n_IPCEI= 1+Math.floor(nmsg*Math.abs(Math.sin(now.getTime())));
      if (n_IPCEI>nmsg) { n_IPCEI= nmsg}
      testo= message[n_IPCEI];
      lentxt= testo.length;
      count= lentxt+width_IPCEI+1;
      setTimeout("scorrimento()",300)
    }
  }
}
window.onload=scorrimento
//]]>
</script>

Dove si digita il Messaggio iniziale e gli altri messaggi. È importantissimo non usare in tali messaggi gli apostrofi perché sarebbero interpretati come javascript e quindi non funzionerebbe niente. Si possono modificare il tempo di permanenza del primo messaggio e la velocità di scorrimento degli avvisi oltre naturalmente ai messaggi veri e propri. È anche possibile inserire una scritta scorrevole senza toccare il template. Basta incollare il primo e il secondo codice uno dietro l'altro su Layout > Aggiungi un gadget > HTML/Javascript e andare su Salva.

Tali messaggi però debbono essere ancora inseriti. Si deve andare su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla il seguente codice

<form name="form_IPCEI" onsubmit="0">
      <input type="text" name="text_IPCEI" style="font-family:'Georgia'; color:#036; background: transparent; font-weight: bold; font-size:22px; width:600px; text-align:left; border:0;"/></form>

dove i parametri in rosso possono essere modificati a piacere per personalizzare l'aspetto dei messaggi.