 |
|
 |
 |
 |
|
 |
 |
 |
  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 Blog Page Rank Gifs animés, f... Poésie et cita... Azote.org - no... Easy-script.com Web creation ... Je crée mon site Outils de créa... Electroniq... K i s s design Créer son site... 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 "Referencement" du jour par krucial Pour savoir combien de pages de votre site sont indexées dans Google, il vous suffit de taper, dans la boite de recherche du moteur : "site:http://www.votresite.com";. Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2012 EJS - Tous droits réservés | CNIL N° 844440 | 12/02/2012 09:45:37 | Design by | Gen. en 0.324 sec.
|
 |