Lavora con noi

Web design

Siti tematici

Speciali

Web Design » Articoli » Web design

Pagine:

RSS

Usare il formato PNG su Internet Explorer

di: Alessandro Fulciniti 25 Agosto 2004

Un menu rollover con trasparenza

Per concludere ho preparato un menu rollover con trasparenza, in cui alle singole voci del menu in stato normale è applicata una png bianca trasparente al 70% che viene tolta in stato :hover. Anche in questo caso il conditional comment e l'AlphaImageLoader sono necessari per sistemare le cose su IE. Ecco il codice HTML e CSS:

<head>
<style type="text/css">
div#navigation{width:150px;background:url(sunset.jpg);
    border: 1px solid #fff;border-width:1px 1px 0}
div#navigation ul,div#navigation li{list-style-type:none;margin:0;padding:0}
div#navigation a{display:block;width:150px;line-height:2em;
    text-decoration:none;border-bottom:1px solid #fff;
    color: #192165;text-indent:10px; background: url(white.png)}
div#navigation a:hover{background: none;color:#fff}
</style>

</head>
<body>
<div id="navigation">
<ul>
    <li><a href="#">Home page</a></li>
    <li><a href="#">Chi siamo</a></li>
    <li><a href="#">Servizi</a></li>
    <li><a href="#">Prodotti</a></li>
    <li><a href="#">Contatti</a></li>
</div>
</body>

Come nel caso precedente, l'immagine png di sfondo viene tolta e rimpiazzata da un filtro nello stato normale dei link. Nello stato :hover quindi viene tolto anche il filtro, così da mostrare in pieno l'immagine sottostante il link. In questo caso è da notare come il conditional comment, e quindi le regole specifiche per IE, vengano messe per ultime. Infatti, a parità di specificità di selettori, le dichiarazioni che prevalgono sono le ultime in ordine di codice. In questo caso quindi le regole specifiche per IE andranno a ridefinire quelle generiche. Anche qui, in casi reali è possibile creare due fogli di stile esterni: uno generico e uno specifico per IE da includere nel conditional comment. È da notare come nell'esempio abbia dichiarato un font dimensionato relativamente e l'altezza delle voci di menu in em. In questo modo è possibile, cambiando la dimensione del font, intervenire anche sull'altezza del menu e delle sue voci, garentando comunque la continuità dello sfondo del div id="navigation". Un effetto simile sarebbe impossibile senza le png e la semitrasparenza.