Sezione del telaio dedicata alla realizzazione e
personalizzazione di pagine web, tutorial e guide per utilità, accessori e gadget
con tanti script utili e originali...
Pagina aggiornata... Domenica, 21 gennaio 2024 *
Tempo di caricamento
0.60
secondi Link navigazione :Home telaio ೡ Home ~ Tutorial ~ Script_pagina » Testo evidenziato lettera per lettera
..:: Testo con effetto evidenziatore ::..
Questo script è stato scritto per rendere ben visibile un numero di telefono...
ma nulla ci impedisce di utilizzare questo simpatico effetto per titoli e/o scrittine
Il codice è molto semplice, i parametri che si possono personalizzare sono tre,
un eventuale colore di sfondo per il testo, il colore dell'evidenziatore e la velocità per l'effetto
N.B.: Lo script non funziona se nella pagina è presente il doctype
Ecco il codice dello script da inserire sopra il tag </head> della pagina
<script type="text/javascript">
var bgcolour="#f0e4ca"; // Colore sfondo base testo se non serve lascia bgcolour=" ";
var hlcolour="#f8f2e2"; // Colore evidenziatore
var speed=250; // Velocità cambio colore, 1 secondo = 1000
/****************************
* Phone-In Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* Non modificare questa parte di codice *
* Tradotto e spiegato da https://www.iltelaiodipenelope.it *
****************************/
var p_txt; window.onload=function() { if (document.getElementById) {
var phoni;
var phone=document.getElementById("phonein"); p_txt=phone.firstChild.nodeValue;
while (phone.childNodes.length) phone.removeChild(phone.childNodes[0]);
for (var i=0; i<p_txt.length; i++) {
phoni=document.createElement("div");
phoni.style.display="inline";
phoni.setAttribute("id", "phon"+i);
phoni.appendChild(document.createTextNode(p_txt.charAt(i)));
phone.appendChild(phoni);
}
phone_me((p_txt=p_txt.length)-1);
}
}
function phone_me(p_cnt) {
var p_tmp=document.getElementById("phon"+p_cnt); p_tmp.style.fontWeight="normal";
if (document.all) p_tmp.style.filter='';
p_tmp.style.backgroundColor=bgcolour;
p_cnt=++p_cnt%p_txt;
p_tmp=document.getElementById("phon"+p_cnt);
if (p_tmp.firstChild.nodeValue!=" ") {
p_tmp.style.fontWeight="bold";
if (document.all) p_tmp.style.filter="GLOW(strength=3, color=#"+bgcolour+")";
p_tmp.style.backgroundColor=hlcolour;
}
setTimeout("phone_me("+p_cnt+")", speed);
}
</script>
All'inizio del codice troviamo i tre campi che si possono personalizzare, il primo per
il colore dello sfondo nel testo, se non serve basta lasciare vuoto il parametro bgcolour="";
nel secondo impostiamo il colore per l'evidenziatore e nel terzo la velocità dell'effetto
Ed ecco il tag in cui scrivere il testo da postare dove si vuole visualizzare
<span id="phonein">Testo messaggio</span>
Il messaggio si visualizzerà con l'effetto arcobaleno e con il font impostato nella pagina
se si vuole differente si può scrivere una classe css o in linea nel tag
<span style="font-family:xxx; font-size: xxpx; color : #xxxxxx;" id="phonein">Testo</span>
Ecco un piccolo esempio in cui ho impostato anche il colore di sfondo per il testo
# Prelevate qui le parti di codici necessarie
- Codice dello script da inserire tra i tag <head> e </head>
- Tag in cui scrivere il testo
Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥
Dai un giudizio a questo tutorial... Grazie ^_^
60%
Voti totali:
1
Rating...
4
Commentario...
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^
Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥
Ciao Penelope, sono venuta a sbirciare il tuo sito dopo aver visto un tuo commento sul blog di Arwen. Penso proprio che userò qualcuna delle tue fatine per uno dei miei siti prossimamente... Ti terrò informata! Torno a trovarti... Buon weekend!
Grazie mille per il suggerimento, cara Penelope! Ci proverò finché non ci riuscirò. Quando sarà pronto te lo mostrerò.
ೡ Scritto in... Home
ೡPenelope ♥ 23/05/2024 19:53:31
Ciao Lu puoi utilizzare una table o un div a cui inserire la tua immagine come sfondo, qui c'è il tutorial per le table [Link] si procede nello stesso modo nei div con background-image, e poi inserisci il codice del calendario, nella cella della table o all'interno del div
Che bello, ho trovato un pulsante che corrisponde al mio blog, l'ho già installato e sembra perfetto! Grazie mille per gli ottimi tutorial, amica Penelope!!