Pagina aggiornata... Domenica, 21 gennaio 2024 * Tempo di caricamento 0.03 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 ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* ♥ Gif...

  


~ Pagina visitata da 1418 utenti


 H: 
Buona Primavera e ...buon sabato!





* Info sezione...

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 ♥

..:: Basi ::..



..:: html ::..







..:: Script page ::..



..:: Script gadget ::..



Accessori e gadget del telaio...


..: Spazio web...


Realizzare e gestire un sito web
con l'hosting free più famoso...



Gif & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Grazia
02/03/2024 06:44:00
Ciao Penny cara,sono passata per augurarti buon sabato... complimenti per le novità ed un abbraccio forte! 😘♥
ೡ Scritto in... Il telaio di Penelope...
 
Cleo
24/02/2024 11:03:51
ciao tesoro ti auguro un buon fine settimana
ೡ Scritto in... Il telaio di Penelope...
 
Nonna Dani
22/02/2024 16:37:27
Bellissimo il tuo blog ho preso l'almanacco e il calendario. Complimenti. Ciao
ೡ Scritto in... Almanacco menu
 
Grazia
18/02/2024 17:18:01
Ciao carissima Penny, auguro anche a te una buona domenica, grazie di essere passata nel Taccuino ♥ Un abbraccio forte e serena serata...a presto!
ೡ Scritto in... Il telaio di Penelope...
 
Lula
15/02/2024 15:32:39
Ciao cara come stai? Spero bene sono passata per un saluto veloce ♥
ೡ Scritto in... Iframe
 
Grazia
07/02/2024 07:45:12
Ciao Penny cara, mentre continuo l'interminabile lavoro per il mio sitino nuovo, sono passata a lasciarti un salutino veloce ♥ Spero sia tutto ok :) Cerco di fare, nei limiti delle mie possibilità, molte cose in contemporanea, avendo tante passioni (a proposito, grazie del tuo voto alla mia poesia su Instagram ♥ ) e quindi sono come te sempre di corsa, ma le amiche vengono prima di tutto. Un abbraccio e mille complimenti come sempre!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
27/01/2024 08:50:44
Ciao Penny cara, sono passata per un salutino e per augurarti buon sabato ♥ Mentre lavoro con SharepointDesigner al nuovo spazio che ti dicevo di recente, un giro di saluti tra le amiche fa sempre piacere. Bacioni ♥
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
21/01/2024 23:01:40
Cara Grazia WordPress è sicuramente la scelta migliore che si possa fare per avere uno spazio professionale semplice da gestire, conosco la piattaforma piuttosto bene e so che è anche molto versatile, per il mio telaio però preferisco un sito tradizionale mi piace trafficare con i codici ^_^ Un abbraccio forte a te
ೡ Scritto in... Iframe
 
Grazia
21/01/2024 08:21:23
Buongiorno e buona domenica Penelope! ❤️ Sai, io adoro come te i siti statici, ma per quel che riguarda gli spazi che personalmente costruisco con WordPress, sono tutti realizzati con software esterni acquistati di editing tecnico-grafico, nel mio caso non utilizzo le basi pronte fornite da Altervista, ma decido ogni singolo componente (anche la struttura interna delle pagine ecc.). Avevo bisogno di un blog per argomentare e WordPress era la scelta più professionale a disposizione! È sempre un piacere passare a trovarti, un abbraccio forte forte a te e ai ragazzi ed a presto
ೡ Scritto in... Iframe
 
Penelope
20/01/2024 22:57:04
Grazie carissima Grazia i tuoi complimenti sono davvero graditi, gli iframe sono una grande risorsa web e capire come utilizzarli al meglio può essere molto utile, spero ^_^ ho provato ad utilizzare WordPress con Altervista ma non fanno per me i cms, preferisco un sito indipendente da codici preimpostati Un abbraccio forte
ೡ Scritto in... Iframe
 

Referer...


Gestisci le opzioni di privacy