 |
 |
 |
 |
|
 |
 |
 |
  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 Création logo Comparateur de prix Foire aux questions Les membres Devenir annonceur Faire un lien Contact Hebergement gratuit Le PHP facile Horoscope Comscripts WebmasterClub Activeartanima... Le village de ... Faro-dessing L'écriteau Gifs animés, f... Easy-script.com Netsources Créer son site... Création de 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 "Navigateur" du jour par leBoss Sous Firefox, vous pouvez définir plusieurs pages de démarrages dans les options en utilisant le séparateur |. Elles s'ouvriront toutes dans un onglet différent. Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 12/10/2008 13:47:05 | Design by Studcrea | Gen. en 0.293 sec.
|
 |