(X)HTML e CSS

Slide di immagini con i CSS

Fare cambiare immagini con posizioni fisse al passaggio del mouse su di un link

Un piccolo esempio di quello che vogliamo ottenere con questa guida; è un po' bruttino, ma è tanto per avere un idea.

La struttura (X)HTML è la seguente.

<div id="boxlink">



    <div id="imglink"></div>



    <ul>

        <li>

            <a href="/xhtml_e_css/" id="pr">CSS e XHTML

               
<span></span>

            </a>

        </li>

        <li>

            <a href="/page/" id="se">Web Surfing

               
<span></span>

            </a>

        </li>

        <li>

            <a href="/page/link.php" id="te">Link

               
<span></span>

            </a>

        </li>

        <li>

            <a href="/page/stili.php" id="qu">Stili

               
<span></span>

            </a>

        </li>

    </ul>



</div>

A grandi linee, quello che dobbiamo ottenere coi CSS è:

Dare a #boxlink una position: relative (questo perché di seguito useremo dei position: absolute che dovranno far riferimento a questo elemento contenitore);
Dare a #imglink una position: absolute ed un'immagine di sfondo (che sarà l'immagine iniziale);
Dare ad ogni <span> contenuto nei link un'immagine di sfondo (per fare ciò dobbiamo dare ad ogni link un ID diverso);
Fare in modo che al passaggio del mouse sui link, il rispettivo <span> con la sua immagine di sfondo si vada a sovrapporre all'immagine iniziale (data di sfondo a #imglink);
Aggiustare un po' il codice per renderlo compatibile coi principali browser.

Il CSS con cui ottenere l'effetto è il seguente;

#boxlink{

    position: relative;

    width: 20em;

}

E' l'ID del <div> che conterrà il link con l'effetto rollover, importante la definizione del width, senza da problemi con InternetExplorer, oltre che il position relative, che permette di utilizzarlo come riferimento per posizionare gli elementi in esso racchiusi in modo assoluto.

#imglink{

    position: absolute;

    top: 0;

    left: 0;

    width: 65px;

    height: 65px;

    background: url(1.gif);

    z-index: 1;

}

Posiziona il box #imglink con l'immagine iniziale di sfondo in alto a sinistra.

ul{

    margin-left: 100px;

    padding-left: 0px;

}

Lascia all'elenco puntato uno spazio a sinistra per lasciare lo spazio alle immagini. Azzera il padding per far visualizzare nello stesso modo l'elenco da tutti i browser.


a {text-decoration: underline;}

a span{text-decoration: none;}

Questo è praticamente inutile, ma senza, Opera, non considererebbe la pseudo classe :hover di seguito definita; questo vale anche per semplici effetti al passaggio del mouse su di un normale link.

a:hover, a:hover span{

    display: block !important;

    display: inline;

}

Senza il primo a:hover con InternetExplorer, inspiegabilmente, non funziona. Il display: block serve per Opera che farebbe visualizzare male le immagini; !important serve ad Opere per non far sovra scrivere questa definizione da quella che segue (display: inline;) che viene invece sovra scritta da InternetExplorer. Infatti display: block darebbe problemi con IE.

Per Mozilla ed i browser Gecko-based il codice non è funzionale.

a:hover span{

    position: absolute;

    top: 0;

    left: 0;

    width: 65px;

    height: 65px;

    z-index: 2;

}

Il codice fa spostare gli <span> con l'immagine di sfondo, sopra al box #imglink.

#pr span{background: url(2.gif);}

#se span{background: url(3.gif);}

#te span{background: url(4.gif);}

#qu span{background: url(5.gif);}

Con questo codice si da un'immagine di sfondo per ogni <span> linkato.

Abbiamo finito, ecco ciò che abbiamo ottenuto.