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)
  • menù = è il nome che apparirà come principale nel menù a tendina. Anche questo va cambiato in ogni punto del codice in cui appare.
  • 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 = 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; height:30; 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 e l'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;">

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:

 <object>
<style type="text/css">

.roll
{
font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 1;
}

.roll a
{
padding: 1;
display: block;
color: #000000; //colore testo
font-size: 18px; //grandezza caratteri
width: 300px; //spazio occupato dal testo in larghezza
height: 18px; //altezza fondo evidenziato
display: block;
text-decoration: none;
}

a:hover
{
background-color: #ccc; //colore sfondo testo
color: #eee; //colore testo evidenziato
}

.roll
{
cursor: pointer;
}

</style>

<div class="roll"><br>
<a target="_parent" href="URLcollegamento">Testo</a>
<br>
<a target="_blank" href="URLcollegamento">Testo</a>
</div>

</object>

I parametri modificabili sono quelli in rosso. Accanto ad alcuni, trovate gia` la descrizione. Gli altri, vanno modificati in questo modo:
  • a target="_parent", oppure "_blank": il primo tag fa aprire il link nella stessa scheda del browser, il secondo lo apre in una nuova scheda.
  • "Urlcollegamento": qui dovete inserire l'indirizzo di collegamento.
  • Testo: qui inserite il testo che apparira` nella pagina.
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 target="_blank" href="URLcollegamento">Testo</a>
(oppure con "_parent")

..separando ogni striscia con il tag <br>, che serve ad andare a capo.

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:

<html>
<head>
<script language="JavaScript1.2">
<!-- Autore:  Massimo Giari (webmaster@massimo61.org) -->
<!--
function digitalclock(){
var data =new Date()
mese = data.getMonth();
giorno =data.getDay();
anno = data.getFullYear();
date = data.getDate();
ora = data.getHours();
minuti=data.getMinutes();
secondi=data.getSeconds();
if(giorno == 0)giorno = "Domenica";
if(giorno == 1)giorno = "Luned\i";
if(giorno == 2)giorno = "Marted\i";
if(giorno == 3)giorno = "Mercoled\i";
if(giorno == 4)giorno = "Gioved\i";
if(giorno == 5)giorno = "Venerd\i";
if(giorno == 6)giorno = "Sabato";
if(mese == 0)mese = "Gennaio";
if(mese ==1)mese = "Febbraio";
if(mese ==2)mese = "Marzo";
if(mese ==3)mese = "Aprile";
if(mese ==4)mese = "Maggio";
if(mese ==5)mese = "Giugno";
if(mese ==6)mese = "Luglio";
if(mese ==7)mese = "Agosto";
if(mese ==8)mese = "Settembre";
if(mese ==9)mese = "Ottobre";
if(mese ==10)mese = "Novembre";
if(mese ==11)mese = "Dicembre";
if (ora <=9)ora="0"+ora;
if (minuti<=9)minuti="0"+minuti;
if (secondi<=9)secondi="0"+secondi;
data="<font size='4' face='Verdana' color='red'>"+giorno+" "+date+" "+mese+" "+anno+" "+ora+":"+minuti+":"+secondi+"</font>"
if (document.all)
document.all.clock.innerHTML=data;
else if (document.getElementById)
document.getElementById("clock").innerHTML=data;
else
document.write(data)
}
if (!document.all&&!document.getElementById)
digitalclock()
function loadtime(){
if (document.all||document.getElementById)
setInterval("digitalclock()",1000)
}
onload=loadtime
// -->
</script>
</head>
<body>
<span id="clock"></span>
</body>
</html>

I parametri che potete modificare, sono quelli in rosso, corrispondenti alla dimensione del testo (size), al font (face) e al colore (color).
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:

<font size="3" color="red" face="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>
</font>

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->>