Efecte rollover (N.mig)

osdiwe — Sat, 16 Feb 2008 06:46:34 +0000

En ocasions, utilitzar imatges per crear els menús, pot ser interessant per millorar l'aspecte de la pàgina. Però la majoria de tècniques bàsiques per crear un efecte de RollOver tenen un problema: la càrrega de les imatges. Això provoca que durant uns instants, al col·locar el ratolí a sobre l'enllaç, no aparegui cap imatge (sobretot en les conexions més lentes). Per solucionar aquest problema i no haver d'afegir codi en JavaScript (que alguns usuaris tenen desactivat) hi ha una tècnica en CSS que es basa en crear una sola imatge per tots els estats dels enllaços, jugant amb la part visible i la posició.

Aquest és el codi HTML per crear el menú. Fixeu-vos que els elements del menú es troben dins d'una etiqueta <span> que ens permetrà ocultar el text però sense reduir l'accessibilitat de la pàgina (i els buscadors el podran llegir igualment).

<div class="menu">

      <a href="biografia.php" id="biografia"><span>Biografia</span></a>

      <a href="obres.php" id="obres"><span>Obres</span></a>

      <a href="exposicions.php" id="exposicions"><span>Exposicions</span></a>

      <a href="contactar.php" id="contactar"><span>Contactar</span></a>

      <a href="estudi.php" id="estudi"><span>L'estudi</span></a>

 </div>

Per crear l'efecte rollOver, primer de tot crearem una imatge que ocupi el doble de l'amplada de l'enllaç. La meitat esquerra serà la que es veurà normalment, la meitat dreta es veurà en l'estat :hover (l'imatge serà diferent per cada element del menú).

Imatge amb els dos estats per crear l'efecte

Ara hem de definir els estils del menú. Llegiu els comentaris per saber què fa cada part.

/*Amaga el text alternatiu del menú*/

    a span {display:none;}
/*Imatges que substitueixen el text de cada elment del menú, basant-nos en l'id*/

   #biografia {background-image:url(../images/menu/biografia.gif);}

   #obres {background-image:url(../images/menu/obres.gif);}

   #exposicions {background-image:url(../images/menu/exposicions.gif);}

   #contactar {background-image:url(../images/menu/contactar.gif);}

   #estudi {background-image:url(../images/menu/estudi.gif);}
/*Definim els enllaços com elements de block per crear un menú vertical, els assignem l'amplada i la llargada i posicionem l'imatge segons l'estat de l'enllaç*/

.menu a:link, .menu a:visited {

    display:block;

    width:175px;

    height:30px;

    line-height:30px;

    background-repeat:no-repeat;

    background-position:left top;

    }
.menu a:hover, ..menu a:active, .menu a:focus {

    background-position:right top;

    }

L'amplada original de l'imatge era de 350px. Fixeu-vos que l'amplada de l'enllaç és de la meitat (175px) i posicionem l'imatge de fons a l'esquerra, així només es mostrarà la part que ens interessa. L'únic que fem després és moure l'imatge per alinear-la a la dreta i poder veure la part que representa l'estat :hover. Així de senzill.

Part visible en l'estat a:link. Alineada a l'esquerra

Part visible en l'estat a:hover. Alineada a la dreta.

Per comoditat, properament crearé tots els exemples dels tutorials en una pàgina a part, ja que en aquest blog és més complicat (si no vols pagar per editar els arxius CSS).

Espero que us hagi servit aquest post. Per qualsevol dubte o comentari deixeu un missatge.

substitucio « WordPress.com Tag Feed

Efecte rollover (N.mig)