 |
 |
 |
 |
|
 |
 |
 |
  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 ... L'écriteau Faro-dessing Gifs animés, f... Netsources Easy-script.com Trucs et astuc... Je javascript 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 authon Vous ne le saviez peut-etre pas mais les deux tiers des annuaires des moteurs de recherche (google, altavista, ...) ont la même base de donnée. C'est l'open directory project ODP. Il suffit de s'y inscire et le tour est joué. Le site pour s'incrire : http://www.dmoz.org Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 19/11/2008 19:53:01 | Design by Studcrea | Gen. en 0.313 sec.
|
 |