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.30
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 Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
ೡPenelope ♥ 18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥