ciao ragazzi,
dovrei copiarel 'effetto della nuova barra di navigazione di html.it cioè per intenderci, l'effetto di cambio immagine quando ci passo sopra con il mouse.
mi aiutate?
grazie!
ciao ragazzi,
dovrei copiarel 'effetto della nuova barra di navigazione di html.it cioè per intenderci, l'effetto di cambio immagine quando ci passo sopra con il mouse.
mi aiutate?
grazie!
ragazzi come potrei fare?
grazie!
direi che un modo è con la pseudoclasse :hover che attiva lo stile solo al passaggio del mouse..
un altro potrebbe essere con il rollover, ma non lo conosco bene..cerca qualcosa su questi argomenti (:hover è ben spiegato nella guida ai CSS qua su html.it)
ciao!
p.s. forse anche con Java script, ma sono proprio ignorante in quest'ultimo campo..
ecco, io vorrei cercare di capire le varie differenze ed adottare la via migliore...
rollover l'ho sentito già...
La tecnica migliore credo sia quelle che segue i seguenti princìpi:
- per prima cosa occorre realizzare il menu utilizzando una struttura di markup adeguata, ad esempio:
[*] poi occorre realizzare le due immagini di sfondo; poniamo il caso di averlo fatto, usando come dimensioni 200×50 px²;codice:
[*] adesso passiamo ai fogli di stile; dobbiamo porre i vari elementi di lista su una stessa riga, dare una dimensione fissa ai link (200×50) ed applicare l'immagine di sfondo:
[/list]codice:ul, ul * { margin:0; padding:0; } li { float:left; width:200px; height:50px; list-style-type:none; } li a { display:block; width:200px; height:50px; background:url('sfondo.gif') no-repeat 50% 50%; text-align:center; text-decoration:none; } li a:hover { background-image:url('sfondo-hover.gif'); }
In questo modo, come noterai, i pulsanti rimarranno testuali e le immagini saranno gestite come sfondi, favorendo qualsiasi tipo di dispositivo, anche, ad esempio, quelli usati dalle persone non vedenti per navigare in rete.
Leading the Web to Its Full Potential...
www.pierofix.it | www.w3.org | www.zeldman.com/externals | http://browsehappy.com | www.alistapart.com | www.webstandards.org | www.flickr.com/photos/pierofix/
puoi farlo con javascript oppure con i fogli di stile usando la pseudoclasse hover. La differenza è che la prima soluzione funzione dovunque javascript è presente (ma potrebbe anche essere disabilitato dall'utente). La seconda soluzione è più accessibile ma ha lo svantaggio di non funzionare su IE se applicato ad elementi diversi dai link
Esistono anche soluzioni ibride in cui si usano sia i i css sia uno script che corregge il comportamento dell'hover quando si usa IE. Se non ho visto male comunque il menu a tab di html.it è fatto in puro javascript
ti consiglio di leggere questo articolo.
Ciao
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
e nel caso volessi utilizzare i rollover?Originariamente inviato da pierofix
La tecnica migliore credo sia quelle che segue i seguenti princìpi:
- per prima cosa occorre realizzare il menu utilizzando una struttura di markup adeguata, ad esempio:
[*] poi occorre realizzare le due immagini di sfondo; poniamo il caso di averlo fatto, usando come dimensioni 200×50 px²;codice:
[*] adesso passiamo ai fogli di stile; dobbiamo porre i vari elementi di lista su una stessa riga, dare una dimensione fissa ai link (200×50) ed applicare l'immagine di sfondo:
[/list]codice:ul, ul * { margin:0; padding:0; } li { float:left; width:200px; height:50px; list-style-type:none; } li a { display:block; width:200px; height:50px; background:url('sfondo.gif') no-repeat 50% 50%; text-align:center; text-decoration:none; } li a:hover { background-image:url('sfondo-hover.gif'); }
In questo modo, come noterai, i pulsanti rimarranno testuali e le immagini saranno gestite come sfondi, favorendo qualsiasi tipo di dispositivo, anche, ad esempio, quelli usati dalle persone non vedenti per navigare in rete.
comunque grazie 1000!
se usi dreamweaver è semplicissimo: crei prima le due immagini con un programma di grafica come photoshop o fireworks, poi una volta aperto dreamweaver vai sul menu INSERISCI > OGGETTI IMMAGINE > IMMAGINE DI ROLLOVER indicando quale è l'immagine principale e quella che deve apparire quando ci passi su col mouse. Il tutto è governato da codice javascript che però lo scrive il programma.
PS. se hai un minimo di familiarità con il codice, io però ti consiglio di usare i css...
This is not mission difficult, Mr. Hunt... It's mission impossible.
Permessi di invio
Rispondi quotando