Pagina aggiornata... Domenica, 21 gennaio 2024 * Tempo di caricamento 0.32 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 2446 utenti


 H: 
Buona Primavera !





Segui il telaio su Facebook

Privacy Policy Cookie Policy

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

ೡPenelope ♥
23/04/2025 16:44:57
Grazie infinite cara Gabriella
ೡ Scritto in... Decori per pagine web
 
Cleo
14/04/2025 07:51:14
Tesoro buon giorno come stai?? scusa se ti disturbo volevo saperese a te Ws ftp funziona per salvare tutto sul sito altervista a me non sta funzionando piu io ho winws10 tu cosa utilizzi mi puoi aiutare appena apro wstp si chiude non sto riuscendo a pubblicare grazie in anticipo un abbraccio e buona settimana santa tesoro
ೡ Scritto in... Contatti
 
Gabriella
29/03/2025 13:09:27
Ciao Penny, che meraviglia ! Li preleverei tutti, intanto ne ho prelevato uno ma c'è veramente l'imbarazzo della scelta . Complimenti come sempre !
ೡ Scritto in... Decori per pagine web
 
Grazia
09/03/2025 18:13:32
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
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
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.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
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 ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
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 ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^