Effetti sul testo

di Maria Silvana Radice






Effetti sul testo

Text effects

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.


Testo espandibile:

Cliccate su "mostra testo nascosto, per visualizzare e, poi, su "nascondi testo", per rientrare.


Il codice da utilizzare è questo:
<span id='link'>
<span style='color: #000000; cursor: pointer;' onclick="document.getElementById('testonascosto').
style.display='block'
document.getElementById('link').style.display='none';">
Mostra testo nascosto
</span>
</span>
<span style='display: none' id='testonascosto'>
<span style='color: #FF3300; cursor: pointer;' onclick="document.getElementById('testonascosto').
style.display='none'
document.getElementById('link').style.display='block';">
Nascondi testo
</span>
<br>
Ciao è una prova
</span>

Va inserito tra <body> e </body>.
Al posto delle parole in rosso, potete inserire il testo che preferite. Potete anche cambiare il colore di "Mostra testo nascosto" (#000000) e di "Nascondi testo" (#FF3300). (Editor colori)
Il tag <br> che ho messo in verde, serve se volete che il testo vada a capo, anziche` essere in riga con i comandi. Se volete che il testo nascosto appaia a destra dei comendi, toglietelo.

In Google sites, questo gadget può essere caricato seguendo la guida: Come inserire codici e scripts in Google sites. Dato che, con Google sites, il codice viene racchiuso in un gadget, per ottenere un effetto espansione con spostamento del testo sottostante, e`necessario includere tutto il contenuto inferiore della pagina nel gadget stesso. In questo caso, e` importante che la larghezza del sito sia fissa e non impostata sul 100%.


Menù a tendina 1:

Esempio (senza collegamenti):

Il codice per inserire un menù a tendina in una pagina web, è questo:

<form name="box_1" action=" ">
<select name="menu"
onchange="window.open(box_1.menu.options
[menu.selectedIndex].value,'_blank')">
<option value="0">MENU</option>
<option value="URL collegamento">Titolo 1</option>
<option value="URL collegamento">Titolo 2</option>
<option value="URL collegamento">Titolo 3</option>
<option value="URL collegamento">Titolo 4</option>
</select>
</form>

I termini in rosso, sono quelli modificabili, in questo modo:
  • box_1 = identifica il box che contiene il menù, cioè, se vorrete fare un secondo menù a tendina, nella stessa pagina, lo dovrete chiamare "box_2", se ne farete  un terzo, lo chiamerete "box_3" e così via (ricordatevi di modificare il nome anche nella seconda riga)
  • MENU = è il nome che apparirà come principale nel menù a tendina.
  • URL collegamento = qui, dovete inserire il link a cui verrà indirizzato chi clicca sulla relativa voce del menù. Se non volete collegamenti, lasciate così com'è.
  • Titolo 1/2/3/4 = titolo del collegamento.
Va inserito tra <body> e </body>.
Se volete aggiungere altre voci, dovete ripetere questa stringa:

<option value="URLpagina">Titolo</option>

In Google sites, può essere inserito direttamente nell'html della pagina, nel punto dove si vuole che appaia il menù. Oppure seguendo il percorso inserisci->altri gadget->embed gadget.


Menù a tendina 2:

Esempio (senza collegamenti):

Codice:
<form name="Form 1">
<label><font color="blue"><big>Descrizione</big></font></label>
<select name="ddmenu_name" id="ddmenu_name">
<option value="URL primo collegamento" selected>Titolo</option>
<option value="URL collegamento">Titolo 1</option>
<option value="URL collegamento">Titolo 2</option>
<option value="URL collegamento">Titolo 3</option>
<option value="URL collegamento">Titolo 4</option>
 </select>
<input type="button" name="Submit" value="Vai" onClick="window.open(ddmenu_name.value,'newtab')">
</form>

I parametri da modificare sono quelli in rosso, in questo modo:
  • form 1: se mettete altri menù nella stessa pagina, dovete dare loro dei numeri progressivi (1,2,3....).
  • color="blue":  è il colore della descrizione, potete inserirlo usando i codici dei colori, oppure il loro nome in inglese (Editor colori)
  • Descrizione: è la descrizione del menù.
  • URL primo collegamento: qui dovete mettere l'URL abbinato al primo titolo, quello, cioè, che appare ad ogni accesso di pagina.
  • Titolo: nome che volete dare ad ogni voce del menù, collegata al rispettivo link.
  • URL collegamento: qui dovete mettere l'indirizzo del collegamento che si aprirà cliccando sulla relativa voce del menù.
  • Vai: comando che appare sul tasto di invio.

Va inserito tra <body> e </body>.

In Google sites, può essere inserito direttamente nell'html della pagina, nel punto dove si vuole che appaia il menù. Oppure seguendo il percorso inserisci->altri gadget->embed gadget.


Vedi anche: Menù a tendina con immagini

Bottone con link:


Per creare un bottone come quello di esempio, dovete usare questa stringa di codice:

 <input type="button" onClick="window.open('URLcollegamento')" value="testo sul bottone" class="forminput">

Per un bottone piu` personalizzato, potete usare questo codice....

<input type="button" onClick="window.open('URLcollegamento')" value="testo sul bottone" class="forminput" style="background-color:blue; color:#fff; width:100; padding: 6px 12px; border:0; border-radius:20px;">

....dove, come vedete, potete impostare il colore di background e quello del testo, usando o il nome in inglese del colore, oppure il suo codice web (Editor colori), le dimensioni, il padding (distanza del testo dai margini) e il grado di arrotondamento degli angoli (border-radius).
Questo e` il risultato:


Se volete che il collegamento si apra nella stessa pagina e non in una pagina nuova, dovete modificare la stringa relativa al comando "onclick" in questo modo:

onClick="window.location.href='URLcollegamento'"


Se volete personalizzare il font del testo sul bottone, potete usare questo codice:

<input type="button" onClick="window.open('URLcollegamento')" value="testo sul bottone" class="forminput" style="background-color:blue; font-size:20px; font-family: Times New Roman; color:#fff; border:0; border-radius:20px; padding: 6px 12px;">

Risultato:


In Google sites, questi bottoni si possono inserire seguendo la guida Come inserire codici e scripts in Google sites

Cambio di colore al passaggio del mouse (rollover):

Esempio:

Questo effetto, ci permette di gestire il colore del testo e dei link al passaggio del mouse.

Codice:

<html>
<head>
<style>
a:hover{
    background-color: yellow;
    color: red;
}
</style>
</head>
<body>
<a target="_blank" href="URLcollegamento">Titolo</a>
</body>
</html>

I parametri modificabili sono quelli in rosso. Accanto ad alcuni, trovate gia` la descrizione. Gli altri, vanno modificati in questo modo:
  • yellow e red: sono i colori, rispettivamente, dello sfondo e del testo
  • "Urlcollegamento": qui dovete inserire l'indirizzo di collegamento.
  • Titolo: qui inserite il testo che apparira` nella pagina.
  • target="_blank: apre il link in una nuova scheda del browser, se volete che si apra nella stessa scheda, omettetelo.
I colori devono essere inseriti con il loro codice web, oppure con il loro nome in inglese (Editor colori) Per aggiungere altre righe di testo, dovete ripetere la striscia ..

<a href="URLcollegamento">Testo</a>


In Google sites, questo codice puo` essere inserito direttamente nel codice HTML, oppure usando lo strumento inserisci->altri gadget->embed gadget.

Finestra di avviso (alert):

Esempio:

Codice:

<a href="JavaScript:alert('Testo del messaggio')">Testo visibile</a>

Se volete che il messaggio contenga un link, il codice è questo:

<a href="URL collegamento" onclick="alert('Testo del messaggio')">Testo visibile</a>

Se volete che la finestra si apra in automatico all'apertura della pagina, usate questo codice:

<script type="text/javascript">
<!--
function mostraMessaggio()
//-->
</script>
<body onload="window.alert('Testo del messaggio')">

Se volete degli avvisi in sequenza, usate questo codice:

<script type="text/javascript">
<!--
function mostraMessaggi() {
   window.alert("Messaggio numero 1");
   window.alert("Messaggio numero 2");
   window.alert("Messaggio numero 3");
}
//-->
</script>
<a href="javascript:mostraMessaggi()">Testo visibile</a>


In Google sites, questi codici vanno inserito seguendo la guida: Come inserire codici e scripts in Google sites. Google sites ha, anche, una funzione preimpostata per creare un messaggio all'ingresso del sito. Leggi: Messaggio all'apertura del sito

Data e ora:

Mi scuso con l'autore del codice, Massimo Giari, ma ho smarrito la fonte di questo script e non posso, quindi, riportarla. Lo farò, volentieri, nel caso lui, o chi per lui, visitando questa pagina, mi volesse informare in merito. Grazie

Esempio:



Codice:

<script type="text/javascript">
tday=new Array("domenica","lunedi","martedi","mercoledi","giovedi","venerdi","sabato");
tmonth=new Array("gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre");
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+ndate+" "+tmonth[nmonth]+" "+nyear+", "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox" style="text-align: left; font:14pt Arial; color:blue;"></div>
Fonte

I parametri che potete modificare, sono quelli in rosso.
In Google sites, questo codice va inserito seguendo la guida Come inserire codici e scripts in Google sites.

Messaggio e/o immagine che cambia secondo l'orario:

Esempio:

Un messaggio per i vostri visitatori che cambia seguendo l'orario della giornata. Un'idea carina....
Il codice è questo:

<div style="font-size:24px; color:red; font-family:arial,verdana;">
<script language="JavaScript" type="text/javascript">
<!--  //
giorno = new Date();
ora = giorno.getHours();

if(ora < 6) {document.write("Buon riposo....");}
else
if(ora < 12) {document.write("Buongiorno!");}
else
if(ora < 18) {document.write("Buon pomeriggio!");}
else
if(ora < 24) {document.write("Buona serata!");}

document.write;
// -->
</script>
</div>

I parametri da modificare sono quelli in rosso, in questo modo:
  • font size="3": è la grandezza del testo, potete aumentarla, o diminuirla.
  • color="red": è il colore del testo, potete cambiarlo usando i codici dei colori, oppure il loro nome in inglese (Editor colori).
  • face="arial,verdana": questo è il carattere del testo che potete sostituire con un altro font a scelta.
  • if(ora < 6): qui dovete impostare l'orario, in questo modo....la scritta "< 6" significa "prima delle 6"; se impostato così, il messaggio a cui si riferisce verrà visualizzato fino allo scoccare delle 6 del mattino (lo script lavora sulle 24 ore). Questo vuol dire che se l'ultimo messaggio termina prima delle 24 (come da esempio), dalle 24, fino alle 5 e 59, verrà visualizzato il messaggio "Buon riposo". Immediatamente dopo, apparirà "Buongiorno!" e così via.
  • write("Buongiorno"): qui, al posto dei messaggi di esempio, potete scrivere i messaggi che preferite.
Se volete mettere anche un'immagine accanto al testo, la stringa diventa cosi`:

 if(ora < 24) {document.write("<img src='URLimmagine'>Testo");}

In questo caso, l'immagine rimane a sx e il testo a dx. Potete invertirli in questo modo:

 if(ora < 24) {document.write("Testo<img src='URLimmagine'>");}

Per andare a capo, usate il tag <br>. Per distanziare in orizzontale, usate il tag &nbsp;

Se volete solo l'immagine, togliete il testo.

Il codice va inserito tra <body> e </body>. In Google sites, questo codice va inserito seguendo la procedura per Come inserire codici e scripts in Google sites.





Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in     

Ti e` stato utile questo argomento?
 



Continua con: Effetti sulle immagini->>