Bonjour,
j'ai crée une liste en html dans le but d'en faire une barre de navigation : 7 icônes. Chaque icône est une image représentée dans deux états : actif et non actif. Le CSS sert à décaler l'image au survol pour passer de l'inactif à l'actif, comme suit :
Code :
- <div id="menu_calculateur">
- <ul id="onglets">
- <li id="onglet1" <?= $actif1 ?>><a href="#" onclick="page(1); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- <li id="onglet2"><a href="#" onclick="page(2); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- <li id="onglet3"><a href="#" onclick="page(3); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- <li id="onglet4"><a href="#" onclick="page(4); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- <li id="onglet5"><a href="#" onclick="page(5); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- <li id="onglet6"><a href="#" onclick="page(6); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- <li id="onglet7" <?= $actif_r ?>><a href="#" onclick="champ_obligatoire(); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
- </ul>
- </div>
|
et un fichier CSS qui permet de faire changer l'image de fond de chaque icone au survol :
Code :
- }
- div#menu_calculateur ul#onglets li#onglet1:hover {
- background-position: 0px -55px;}
- ...
- div#menu_calculateur ul#onglets li#onglet7:hover {
- background-position: 0px -55px;
- }
- div#menu_calculateur ul#onglets li#onglet1.actif {
- background-position: 0px -55px;
- }
- ...
- div#menu_calculateur ul#onglets li#onglet7.actif {
- background-position: 0px -55px;
- }
|
ca marche très bien sous IE et Firefox. Seulement, j'ai envie que ces icones soient cliquables. J'ai donc ajouté un fichier transparent png : La encore ca marche sous IE et firefox, sauf sous IE6 qui ne sait pas interpréter le png, et qui me grise du coup ma barre de navigation.
En gros : Comment je peux faire pour rendre ma liste cliquable sans rien y mettre dedans ? Merci bcp
Message édité par endozen le 19-11-2008 à 18:53:03
---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM
![[:azylum]](https://forum-images.hardware.fr/images/perso/azylum.gif "[:azylum]")
.