Effetti sul testo

Sommario:

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

Testo espandibile

Esempio (click sul testo sottostante):
Mostra testo nascosto

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

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.

Elenco 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 = titolo del collegamento.
Se volete aggiungere altre voci, dovete ripetere questa stringa:
<option value="URLpagina">Titolo</option>

Elenco a tendina 2

Esempio (senza collegamenti):

Codice:
<form name="Form 1">
<label><span style="color: #2969B0; font-size: 1.125em;">Descrizione</span></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="#D14841":  è il colore della descrizione, potete inserirlo usando i codici dei colori, oppure il loro nome in inglese Editor colori)
  • font-size: 1.125em: è la dimensione de testo della descrizione.
  • 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.

Vedi anche: Come fare a -> Menù a tendina con immagini

Bottone con link

Per creare un bottone semplice, come questo, 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; border:0; border-radius:20px; padding: 6px 12px;">

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


Cambio di colore al passaggio del mouse (rollover)

Esempio:
Titolo del link

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 potete inserire l'indirizzo di collegamento se lo desiderate.
  • 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>

Finestra di avviso (Alert)

Esempio:
Testo visibile

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')">

..o, più semplicemente, direttamente nel tag body:
<body onload="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>


NOTA: i tag HTML non sono consentiti nel testo di un alert. Per andare a capo, potete usare il segno \n

Data e ora in tempo reale


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 personalizzabili sono quelli in rosso.

Messaggio e/o immagine che cambia secondo l'orario


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:24px: è 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).
  • font-family: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.







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No


Continua con: Effetti sulle immagini

E molto altro ancora se leggi:
Tutti gli argomenti