Pubblicato il 24/02/14e aggiornato il

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


messaggi-scorrevoli
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.




17 commenti :

  1. Gradirei capire perchè con IE le scritte scorrevoli si fermano al passaggio del mouse ma con Mozilla no.
    Questo almeno visto dal mio PC

    RispondiElimina
    Risposte
    1. La scritta funziona correttamente anche con Firefox. Forse devi aspettare che la pagina si carichi totalmente prima di mettere il mouse sul testo
      @#

      Elimina
    2. No, non è così. Non per niente ho scritto "come visto dal mio PC". Già altri mi hanno confermato che funziona con Firefox.
      Ho un blog con lo stesso nik su Libero. Ebbene, avviene il contrario. Con Firefox vedo correttamente, con IE non vedo lo sfondo blu che ho applicato al post.
      ... e non riesco a capire.
      Grazie comunque.

      Elimina
    3. È chiaro che si tratta di un problema del tuo OS
      @#

      Elimina
  2. Dal mio explorer compare un rettangolo nero al posto della scritta, come lo risolviamo?

    RispondiElimina
    Risposte
    1. Tra un po' Explorer andrà in pensione per fortuna. Con IE10 si vede sicuramente.
      @#

      Elimina
  3. Salve Ernesto,
    è possibile rendere cliccabile il testo, mentre scorre?
    Grazie.

    RispondiElimina
    Risposte
    1. Certamente ma solo con il primo codice marquee. Con il javascript è molto più complicato. Tanto per farti un esempio se nel primo codice sostituisci
      Scritta scorrevole colorata
      con
      <a href='http://www.google.it' target='_blank'>Apri Google</a>
      avrai una scritta che potrà essere linkata e che aprirà il collegamento in un'altra pagina
      @#

      Elimina
    2. Scusa Ernesto, oggi, mi sono accorto che, la scritta scorrevole su browser tipo Firefox o Safari, produce un antiestetico sfondo blu, nonostante io abbia impostato come sfondo "trasparent". Su Chrome, invece, non c'è questo problema. Come si può risolvere? Grazie.

      Elimina
    3. Ti riferisci al primo codice? Prova a togliere bgcolor="#FDA"
      @#

      Elimina
    4. Si, mi riferivo al primo codice... in effetti, togliendo "bgcolor="#FDA" si è sistemato. Grazie!

      Elimina
  4. Ciao scusa, ma è possibile rendere le immagini cliccabili e essere indirizzati in un altro sito, come hai consigliato per le scritte??

    grazie mille

    RispondiElimina
    Risposte
    1. @# Come il primo codice sì. Al posto di
      Scritta scorrevole colorata
      ci metti questo codice
      <a href="URL_LINK_COLLEGATO" target="_blank"><img src="URL_IMMAGINE" alt="nome immagine"/></a>

      Elimina
    2. Grazie mille per l'aiuto, funziona, sei stato veramente gentilissimo!!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.