- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Link del menu con effetto rollover fatto con i soli CSS
-
Personalmente credo che, cercando di conservare il codice della tua pagina, puoi fare così:
ogni tasto nella tua pagina è fatta da due immagini sovrapposte. Una di sfondo e una che contiene il testo.
Quindi lasciando lo sfondo invariato, puoi interessarti al codice che riguarda l'immagine con testo.Ad esempio il link alla home:
<TD vAlign=center align=middle width=118 height=31>[url="javascript:;"]![image](Davide Muci fotografo e SEO specialist - fotografia di danza, sportiva, di scena, sociale - web marketing specialist_file/home.gif)</TD>
Puoi modificarlo sostituendo questo codice:
<TD vAlign=center align=middle width=118 height=31>[url="http://www.davidemuci.it/"]HOME</TD>
Poi ti modifichi lo stile dal CSS a tuo piacimento.
In questo modo elimini solo un'immagine, quella con il testo, ma lo sfondo rimane.
Ne hai anche il vantaggio di avere dei link testuali.Ho fatto qualche tentativo e si vede bene con Explorer. Prova la modifica e testala con vari browser e risoluzioni.
Non so se a te piace così. Ma l'effetto non cambia di molto, se non per il font.
-
Riporto qui un link che spiega bene un bel pò di cose in maniera chiara
[url=http://www.gdesign.it/pages/howto/articoli/rollcss/rollcss.php]Rollover css
Inoltre ho editato il title del post
-
Mi è venuta un'idea bizzarra: se facessi 5 include, ciascuno per ogni voce del menù non ci sarebbe più il problema della larghezza variabile. Portrei quindi posizionare il rollover con background-position!
Che ne dite?
-
non ho capito...
-
scusate ho detto una cazzata
-
problema risolto:
1- ho creato un bottone con photoshop con lo stesso sfondo del mio menu
2- ho scritto una voce del menù ad esempio - Home -
3- a questo punto ho fatto in modo che la scritta home diventasse trasparente. in pratica l'ho selezionata con la bacchetta magica e poi ho premuto canc.
4- a questo punto basta sistemare il foglio di stile:
<style type="text/css">
<!--#home a{background: white;}
a:hover{background: yellow;}
-->
</style>[/img]
-
ingengoso
controlla che funzioni con tutti i browser
-
L'importante è che tu abbia risolto
-
l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
se ti va bene fammelo sapere
-
@esteban said:
l'avevo provato anch'io ma ha un problema (spero per te che derivi dalla grandezza delle immagini) il rollover era in ritardo, invece del normale c'era un attimo in cui tutto era bianco e l'effetto faceva schifino...
se ti va bene fammelo saperequesta è un cosa che mi succede spesso con IE (ovviamente solo con lui) e sinceramente non sono mai riuscito a risolverlo...
-
Vi riferite al flickering?
Ho letto un articolo il quale diceva che per eliminare questo fenomeno è sufficiente specificare lo stesso sfondo dei link anche sul list-item.