Pagina aggiornata... Giovedì 01 Gennaio 1970 * Tempo di caricamento 0.90 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 questa guida... 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 1950 utenti


 H: 
Buon Autunno e ...buon weekend!





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

Penelope
27/09/2023 17:12:31
Ciao Calcifer grazie infinite anche io sono felice di essere tornata
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Calcifer
27/09/2023 15:08:42
AAh, che bello vederti di nuovo attiva! :) Aspettavo da anni il tuo ritorno ♥
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Cleo
25/09/2023 17:58:11
ho fatto un giretto e' tutto ancora piu' bello un abbraccio e grazie per il banner inserito un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
Gabriella
25/09/2023 12:21:45
Bentornata Penelope , ho prelevato un tuo bellissimo bottone. Grazie di cuore !
ೡ Scritto in... Bottoni top pagina
 
Grazia
24/09/2023 19:16:50
Ciao Penny cara, nel messaggio precedente ho omesso di scrivere quella che sembra una ovvietà, ma la scrivo lo stesso: il tuo sito è fantastico, come sempre, la maestra dei codici è tornata 😄😄😄😄 Un abbraccio e serena domenica sera di cuore ❤️
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
21/09/2023 10:24:25
Carissima Penelope, è una gioia immensa leggerti di nuovo! Sono felicissima tu sia tornata online, hai fatto benissimo, gli hobby aiutano tantissimo a risollevare l'animo ...brava! Oltre al mio piccolo blogghino per esempio io mi sto dedicando ai disegni fatti a mano e mi rilassano tantissimo! Ti cerco su Fb così ci sentiamo, se ti fa piacere, più spesso...ti abbraccio immensamente cara amica, a presto!
ೡ ...commentario
 
Cleo
20/09/2023 16:39:32
Ciao tesoro i miei banner sono qui [Link]
ೡ Scritto in... Il telaio di Penelope...
 
Cleo
20/09/2023 12:48:48
Bentornata e' bellissimo rivedere il tuo Sito on line
ೡ ...commentario
 
Cleo
20/09/2023 11:37:11
prendo il tuo link sul mio sito c'è gia lo metto sul portale del forum passa a trovarmi ciccia
ೡ Scritto in... Banner link del telaio ^_^
 
mari-ele
20/09/2023 08:47:54
Ciao Penelope, sono felicissima del tuo ritorno, ci sei mancata tantissimo, un grosso in bocca al lupo per tutto! Un abbraccio!
ೡ Scritto in... *Amici del telaio...*
 

Referer...