Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Script_pagina » Link effetto fade

..:: Link effetto fade/dissolvenza ::..

Uno script utile per realizzare dei menu con un delicato effetto dissolvenza sui link
passate con il mouse su questi bottoncini, i link non sono attivi servono solo per visualizzare l'effetto



Lo script non è complicato da personalizzare, oltre ai colori per l'effetto fade e ad aumentare,
se serve, il numero necessario per i link, non occorre fare altro, per l'aspetto dei bottoni servirà
una classe css, si possono realizzare dei menu sia in verticale che che in orizzontale.

* Non ho potuto consultare lo script originale (non si dovrebbero mai togliere i credits dell'autore!)
ma credo abbia avuto un po' di manipolazioni negli anni, io ho cercato di renderlo più semplice e
gradevole scrivendo la classe per i bottoni ovviamente si possono aggiungere altri parametri,
per rendere i bottoni ancora più carini... Bottoni menu fade

Come procedere...

Iniziamo scrivendo la classe per i bottoni che visualizzeremo con il tag button,
scegliete un nome breve e indicativo all'uso, sarà più semplice da inserire nei link

* L'elemento button è un tag html, senza style si visualizza così



Questa è la classe che ho scritto per i bottoni dell' esempio

<style type="text/css">
.bottoni{
border:5px solid #898f51;
background-color:#babf8f;
width:130px;
text-align:center;
font-family: Verdana;
color:#FFFFFF;
font-size:11px;
margin: 2px 2px 2px 2px;
padding:4px
}
</style>

Vediamo a cosa servono i vari parametri


.bottoni{ - Nome della classe che richiameremo nel tag button
[border:5px solid #f8f2e2;] - Misura, tipo e colore per il bordo
[background-color:#cdaf8b;] - Colore per lo sfondo
[width:130px;] - Misura il larghezza del bottone
Ovviamente se occorre possiamo inserire anche la misura per l'altezza con: [height:xxpx;]
[text-align:center;] - Posizione del testo nel bottone
[font-family:Verdana; color:#FFFFFF; font-size:11px;]
- Parametri per il testo, i link si visualizzeranno con il font, la misura e il colore impostati nella classe
[margin: 2px 2px 2px 2px;] - Posizione dei bottoni nella pagina
[padding:4px] - Spazio del testo rispetto ai bordi all'interno dei bottoni

Ed ecco il codice dello script

Lo script va inserito tra i tag <head> e </head> della pagina

<script type="text/javascript">
/* Link effetto fade - Autore sconosciuto */
/* Rielaborato e spiegato su https:www.iltelaiodipenelope.it */
r = 51; g = 51; b = 0;
ri = 255; gi = 255; bi = 255;
var num = new Object;
var rc = new Object;
var gc = new Object;
var bc = new Object;
var oby = new Object;

while ( num < 8 ) {
rc[num] = r;
gc[num] = g;
bc[num] = b;
}
function fx(id,num){
if ( ( rc[num] < ri ) || ( gc[num] < gi ) || ( bc[num] < bi ) ) {
bc[num] += 11;
gc[num] += 11;
rc[num] += 11;
document.getElementById(id).style.color="rgb("+ rc[num] +","+ gc[num] +","+ bc[num] +")";
setTimeout("fx('"+id+"',"+num+")",40);
}
}

function c(obj,num) {
obj.style.color="rgb(51,51,0)";
rc[num] = r;
gc[num] = g;
bc[num] = b;
}
</script>

Le prime due righe di codice che vedete evidenziate, sono i parametri per i colori
dell'effetto dissolvenza scritti in RGB, personalizzate come preferite vi basterà fare
una ricerca in rete o nel telaio, ho preparato una pagina con il colore in anteprima
e il codice RGB corrispondente da utilizzare: Colori RGB

Nel mio esempio ho lasciato invariata la prima riga e personalizzato la seconda così:
ri = 255,255,240; gi = 85,107,47; bi = 143,188,143;

- L'altro parametro evidenziato while ( num < 8 ) stabilisce il numero dei bottoni/link
aumentate il numero se vi occorrono più bottoni, lasciate invariato anche se non li userete tutti.

* Attenzione a non cancellare simboli essenziali

Vediamo il codice per i bottoni


* Qui il codice si spezza, scrivete tutto su una linea, postate dove volete visualizzare il menu

<button class="bottoni" onmouseover="c(this,1);" onmouseout="fx('l1',1)" id="l1" onclick="document.location='https://url pagina'">Nome Link</button>

- I parametri che ho evidenziato contengo il numero di riferimento del link scritto,
dovremmo incrementare questi "numeri" nei bottoni/link che useremo:

<button class="bottoni" onmouseover="c(this,1);" onmouseout="fx('l1',1)" id="l1" onclick="document.location='https://url pagina'">Nome Link</button>

<button class="bottoni" onmouseover="c(this,2);" onmouseout="fx('l2',2)" id="l2" onclick="document.location='https://url pagina'">Nome Link</button>

<button class="bottoni" onmouseover="c(this,3);" onmouseout="fx('l3',3)" id="l3" onclick="document.location='https://url pagina'">Nome Link</button>

[ecc. ecc.]

- Se volete far aprire le pagine in una nuova finestra sostituite
onclick="document.location='https://url pagina'" con
window.open ('https://url pagina', '', '')

<button class="bottoni" onmouseover="c(this,1);" onmouseout="fx('l1',1)" id="l1" onclick=" window.open ('https://url pagina', '', '')">Nome Link</button>

* Per un menu verticale basterà mettere un accapo <br> alla fine di ogni link...
ecco un piccolo esempio^^


⇜ ↭ ↭ ↭ ⇝

# Prelevate qui le parti di codice e script necessarie


- Base classe css da inserire tra i tag <head> e </head>




- Codice script da inserire tra i tag <head> e </head>




- Tag per i bottoni/link da postare dove si vuole visualizzare il menu






Qualcosa in più... menu link su una linea

L'effetto dissolvenza è sui link quindi se si preferisce, si "nascondono" i bottoni
in una table o un div così da poterli avere tutti su una linea, oltre alla classe per il button
ne scriveremo un'altra per il contenitore scelto, vediamo un paio di esempi...

* Menu in table


Ecco le due classi css necessarie, in pratica lo style del menu è determinato
dai parametri della table, per rendere i button invisibili ho impostato il bordo a 0 (zero)
e inserito lo stesso colore di sfondo della table, parametro evidenziato nell'esempio

Classe per la table

table.menu{
border:3px solid #3e809f;
background-color:#8cc7e0;
text-align:center;
width:450px;
height:30px;
margin-left:auto;
margin-right:auto
}		 Classe per i button

.menu_blu{
border:0px;
background-color:#8cc7e0;
width:100px;
text-align:center;
font-size:12px;
font-family: Georgia;
color:#FFFFFF;
margin: 2px 2px 2px 2px;
padding:2px;
cursor: se-resize;
}


* Menu in div


Ed ecco le classi per il menu in div, come per la table l'aspetto sarà determinato
dai parametri del div, i button sempre invisibili con il bordo impostato a 0 (zero) e lo sfondo
uguale a quello del contenitore, si possono aggiungere altri parametri per qualsiasi
personalizzazione necessaria, qui con i parametri che vedete sottolineati ho aggiunto l'ombra
(shadow) nelle classe del div per dare profondità alla base

Classe per il div

div#menu {
border:1px solid #6f5533;
background-color:#c19558;
width:450px;
height:30px;
margin-left: auto;
margin-right: auto;
-moz-box-shadow: 5px 5px 10px #956c4f;
-webkit-box-shadow: 5px 5px 10px #956c4f;
box-shadow: 5px 5px 10px #956c4f;
}
 Classe per i button

.menu_brown{
border:0px;
background-color:#c19558;
width:100px;
text-align:center;
font-size:11px;
font-family: Verdana;
color:#FFFFFF;
margin: 2px 2px 2px 2px;
padding:4px;
cursor: se-resize;
}

Il codice dello script è sempre lo stesso, fate attenzione a riportare i vari numeri nei link,
nella classe per i button basterà impostare i valori necessari per il bordo e lo sfondo, se volete
postare due menu differenti il nome della classe deve essere specifica per ogni menu, aggiungete
i parametri che preferite ricordando che quelli specifici per i link sono nella classe dei button

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

📄 🌸 Nuovo
0%
Voti totali: 0
Rating... 0




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^









~ Pagina visitata da 2156 utenti





Segui il telaio su Facebook

* 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 e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

Angel ~ 21/03/2026 16:59:16
Ho letto il tuo messaggio inizio pag. : "Codice marquee deprecato..." Io avevo sul mio sito frasi scorrevoli e ora sono ferme!! Non so più come fare... a inserire una frase scorrevole! Mi puoi aiutare? Grazie cmq Penelope. Grazie di tutte le tue meraviglie che crei. Buona domenica!
ૡScritto in Home
ParisNeoni ~ 21/03/2026 10:33:31
I've gone through presumably numerous articles on this same subject this month and none of them hit home the way yours did. There's a clarity here that's tough to fake.
ૡScritto in Home
ૡPenelope ♥ ~ 19/03/2026 21:16:39
Ciao cara Sari mi fa molto piacere volevo lasciare un saluto da te ma il blog è privato quindi lo faccio qui, un abbraccio forte forte buon blog!
ૡScritto in Calendari fiorellini
Sari ~ 19/03/2026 12:54:53
Sono Sari di vocedivento e sto allestendo il mio blog pasquale. A questo scopo ho prelevato il calendarietto a fiorellini azzurri.Grazie, come sempre. Ciao
ૡScritto in Calendari fiorellini
Cris ~ 16/03/2026 15:25:23
Ciao. Ho preso un tuo Almanacco, è perfetto per il mio blog. Grazie!
ૡScritto in Almanacco soft
Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥
ૡScritto in Sfondo pagina
Gabriella ~ 09/03/2026 18:37:40
Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie
ૡScritto in Decori pagine Primavera
soleyada ~ 07/03/2026 22:02:27
Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-*
ૡScritto in Countdown Primavera
Cris ~ 24/02/2026 08:17:18
Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti.
ૡScritto in Home
MOra Ribelle ~ 16/02/2026 12:05:35
Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie
ૡScritto in Gif & co...