 |
|
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX Cours de JavaScript Liste de discussion Forums CountUs myCircle ClickInText XooIt 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 Kit graphique Foire aux questions Les membres Devenir annonceur Faire un lien Contact Compteur live Créer un forum Le PHP facile Comscripts Liens sponsorisés Page Rank Gifs animés, f... Easy-script.com Le village de ... La cuisine de ... Web creation ... Créer son site... Azote.org - no... Les kits graph... Electroniq... Poésie et cita... 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 "HTML / CSS" du jour par fred L'attribut media vous permet de définir une feuille de style différente selon le média de sortie : affichage dans un navigateur (media="screen"), impression (media="print"), impression en braille (media="embossed"), etc. Syntaxe : <link rel="stylesheet" media="screen" href="style.css"> Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2010 EJS - Tous droits réservés | CNIL N° 844440 | 19/03/2010 16:58:53 | Design by | Gen. en 0.477 sec.
|
 |