Pagina aggiornata... Lunedì, 08 Dicembre 2025 * Tempo di caricamento 0.08 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 ^_^
100%
Voti totali: 1
Rating... 5





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


 H: 
Buon Inverno e ...buona domenica!





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



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..


Accessori e gadget del telaio...

Natale menu
..Natale menu..

ೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio

Sito o forum
Blogger-Blogspot

Spazio web...

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

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Sari
18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ೡ Scritto in... Home
 
filod'arianna
14/12/2025 09:32:05
Ciao Penelope, ho preso un countdown Grazie mille per averli messi a disposizione, sono deliziosi! Ne userò più d'uno sicuramente:-)
ೡ Scritto in... Countdown stagioni e feste
 
Elise
13/12/2025 18:12:05
Ciao carissima Penelope, quante meravigliose creazioni di Natale che hai realizzato, ne hopresa una, il caminetto con le calze, STUPENDO!!!!!Grazie tesoro un abbraccio grande e Buone Feste a te e tutta la tua famiglia.Elise
ೡ Scritto in... Decori pagine Natale
 
Grazia
06/12/2025 16:01:26
Ciao carissima Penelope💓 Wow bellissime le tue novità natalizie! A me tutto ok, ti ringrazio di essere passata nel Taccuino 🥰 Lascio un fortissimo abbraccio a te e ai ragazzi. A presto carissima 💖
ೡ Scritto in... Home
 
ೡPenelope ♥
04/12/2025 02:20:20
Cara filod'arianna sistemato il link un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 11:57:26
Ti devo chiedere una gentilezza Penelope ^_^ ho modificato il dominio, potresti correggere il link del mio banner da librandosi.forumfree.it - a librandositralepagine.forumfree.it ? 🙏
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 10:40:55
Ciao carissima , ho preso un decoro per l'home natalizia ♥
ೡ Scritto in... Decori pagine Natale
 
ೡPenelope ♥
29/11/2025 18:34:13
Grazie a te carissima Marilinc
ೡ Scritto in... Settimanelli natalizi
 
ೡPenelope ♥
29/11/2025 18:30:37
Merci beaucoup chère Maleah, vous trouverez ici des modèles prêts à l'emploi pour Blogspot [Link] e ne peux pas réaliser de travaux sur commande, désolé
ೡ Scritto in... html e script Tutorial...
 
MARILINC
29/11/2025 08:59:51
Grazie infinite meravigliosi c'è solo l'imbarazzo della scelta!
ೡ Scritto in... Settimanelli natalizi