 |
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX new! Cours de JavaScript Liste de discussion Forums CountUs myCircle Referencement Créat. de bannière HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kits graphiques Comparateur de prix Foire aux questions Les membres Devenir annonceur Faire un lien Contact Hebergement gratuit Le PHP facile Horoscope Comscripts WebmasterClub L'écriteau Faro-dessing Activeartanima... Le village de ... Images gifs an... Netsources Easy-script.com Création de site Créer son site... K i s s design Les autres Votre site ici
? |
 Lien actif toujours "actif"
Le principe
Les CSS permettent des effets sur les liens au survol de la souris ou sur le clic. Un lien bleu peut devenir noir au survol et rouge s'il est cliqué. Malheureusement il pert sa couleur rouge en perdant le focus. La solution est de lui affecter une autre class quand il a été cliqué : il ne sera plus affecté par le onMouseOver tant qu'il sera "actif". Cette solution est idéale en cas de frames ou d'iframes, sans interêt si les pages s'ouvrent dans la même fenetre. code CSS (entre <head> et </head> :
<style TYPE="text/css">
BODY { text-align:center;margin:0; } A.lien, A.lien:visited { position: relative; color: #949494; font-size: 8pt; font-family: verdana; font-weight: bold; text-decoration: none; width:80px; background-color:aliceblue; margin:5px; padding-left:18px; padding-right:18px; } A.lien:hover { color: #000000; background-color:yellow; } A.clike, A.clike:visited, A.clike:hover, A.clike:active { position: relative; color: #FFFFFF; font-size: 8pt; font-family: verdana; font-weight: bold; text-decoration: none; width:80px; background-color:red; margin:5px; padding-left:18px; padding-right:18px; } #menu{ width:470px; background-color:background; } </style> Le JavaScript (entre <head> et </head> :
<script type="text/JavaScript">
function look(idx){ var lk = new Array('aa','bb','cc','dd','ee')// id des liens. for(var i=0; i<lk.length; ++i) document.getElementById(lk[i]).className = 'lien'; // tous les liens en class "originale". document.getElementById(idx).className = 'clike'; // lien cliqué en class "cliqué" } </script> Exemple d'utilisation (entre <body> et </body> :
<div id="menu">
<A HREF="#" class="lien" id="aa" onclick="look(this.id);return false;">Home</A> <A HREF="#" class="lien" id="bb" onclick="look(this.id);return false;">Page 1</A> <A HREF="#" class="lien" id="cc" onclick="look(this.id);return false;">Page 2</A> <A HREF="#" class="lien" id="dd" onclick="look(this.id);return false;">Page 3</A> <A HREF="#" class="lien" id="ee" onclick="look(this.id);return false;">Page 4</A> </div> Exemple : A vous de personnaliser ... tout est modifiable. Annotations des visiteurs :
>> Poster une annotation sur cette astuce
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "PHP / mySQL" du jour par @Rano Lorsque vous voulez faire une recherche sur les fonctions PHP, allez simplement à l'url : http://fr.php.net/fonction_que_vous_cherchez (par exemple http://fr.php.net/mail) Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 12/05/2008 07:55:07 | Design by Studcrea | Gen. en 0.337 sec.
|
 |