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


 H: 
Felice Estate e ...buon sabato!





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


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

Miryam
07/06/2024 15:32:30
Ciao Penelope, sono venuta a sbirciare il tuo sito dopo aver visto un tuo commento sul blog di Arwen. Penso proprio che userò qualcuna delle tue fatine per uno dei miei siti prossimamente... Ti terrò informata! Torno a trovarti... Buon weekend!
ೡ Scritto in... Home
 
Sabry
27/05/2024 09:09:32
Grazie per tutto, ti seguo da anni ormai e ammiro molto il tuo lavoro ... ho preso con piacere dei tuoi gadget ♥
ೡ ...commentario
 
Lu
23/05/2024 20:47:56
Grazie mille per il suggerimento, cara Penelope! Ci proverò finché non ci riuscirò. Quando sarà pronto te lo mostrerò.
ೡ Scritto in... Home
 
ೡPenelope ♥
23/05/2024 19:53:31
Ciao Lu puoi utilizzare una table o un div a cui inserire la tua immagine come sfondo, qui c'è il tutorial per le table [Link] si procede nello stesso modo nei div con background-image, e poi inserisci il codice del calendario, nella cella della table o all'interno del div
ೡ Scritto in... Calendario perpetuo
 
Lu
23/05/2024 18:59:24
Buon pomeriggio Penelope. Per favore, come faccio a inserire questo calendario in un tag, in modo che abbia un'immagine di sfondo?
ೡ Scritto in... Calendario perpetuo
 
Lu
22/05/2024 18:07:10
Ciao cara Penelope!Ho appena portato uno dei tuoi banner sul mio blog. Un abbraccio, buon pomeriggio!
ೡ Scritto in... Banner link del telaio ^_^
 
Rakel
21/05/2024 18:24:29
Ciao Penelope ho curiosato sul tuo blog ed ho trovato molte cose carine.Ho prelevato un Almanacco.Grazie
ೡ Scritto in... Almanacco trasparente
 
Cleo
21/05/2024 15:22:46
Buon compleanno tesoro [Link]
ೡ Scritto in... Home
 
Lu
20/05/2024 22:37:37
Che bello, ho trovato un pulsante che corrisponde al mio blog, l'ho già installato e sembra perfetto! Grazie mille per gli ottimi tutorial, amica Penelope!!
ೡ Scritto in... Bottoni top pagina
 
Lu
18/05/2024 17:03:22
Ciao cara Penelope! Che carini e delicati questi cursori, adoro quando porti cose che possono essere usate anche su Blogger ♥
ೡ Scritto in... Mini cursori
 





Gestisci le opzioni di privacy