Portes coulissantes?

Salut !!!
Tss, je rencontre le souci suivant...

Il y a peu j'ai assimilé la technique des portes coulissantes... Mais je me retrouve face à un mur... J'ai crée un menu, il y a un mois, et j'utilisais la méthode RoLLover classique... Seulement voilà, après trituté les tutos, je me suis dit que cela serait pas mal de l'adapter avec les nouvelles techniques que j'ai appris sur ce site, mais j'ai un peu de mal...

En fait, "home" "news""contact" et ... sont des images, car j'emploie une typo qui n'est pas installée chez la plupart des potentiels visiteurs... Une image de texte gris donc sur fond blanc, et quand je les survole, il y a juste la couleur de la typo qui change en vert !!! En visu, c'est mieux...



Dans mes anciens projets, j'ai donc mis en place la structure suivante:

image 1 avec rollover * image flèche* image 2 avec rollover- image flèche*etc...

Y'aurait pas une autre technique, avec les portes coulissantes par exemple?

Je suis contraint de faire un div unique pour chaque bouton alors?? Suis un peu paumé en fait.... Merci !

FranZz a écrit :
Il y a peu j'ai assimilé la technique des portes coulissantes...

Intéressante, mais pas le nec plus ultra non plus. Si on s'en sert pour faire des remplacement d'image (je vire mon texte voire je ne mets pas de texte du tout, et j'affiche une image de fond à la place via CSS), c'est pas terrible niveau accessibilité.
La technique des portes coulissantes est très bien pour changer une image de fond... l'image de fond étant une décoration ne portant pas l'information essentielle.

FranZz a écrit :
j'utilisais la méthode RoLLover classique...

Niveau accessibilité, si c'est bien fait (notamment si les images ont une alternative textuelle qui va bien), c'est encore la meilleure solution.

Pour le reste, un peu de lecture (si ça n'est pas déjà fait):
http://css.alsacreations.com/Construction-de-menus-en-CSS/Creer-des-menus-simples-en-CSS

Helouppe FV,

merci pour la redirection vers l'article, que bien entendu j'avais parcouru !!!!

Jvais me relire cela, ptêtre qu'il y a des éléments qui m'ont échappé!

Le but ici était * de savoir si je me complique la vie avec des rollover...
* de me renseigner s'il exisatit une autre méthode...
* d'obtenir des avis de personnes ayant pourquoi pas rencontré
cette interrogation dans leurs conceptions...

La porte et ouverte !

Thank'zzz pour l'avis!

FranZz a écrit :
* de me renseigner s'il exisatit une autre méthode...

D'un point de vue technique, tu pourrais effectivement gérer tout ça directement dans la feuille de style avec un rollover CSS et pourquoi pas la technique des portes coulissantes. Ce n'est pas ce qu'il y a de plus accessible, mais si tu as un texte dans ton lien (caché via text-indent), tu limites un peu les dégâts d'accessibilité.

FranZz a écrit :
* d'obtenir des avis de personnes ayant pourquoi pas rencontré cette interrogation dans leurs conceptions...

Ma réponse serait de faire ceci:

<ul id="menu">
	<li><a href="..."><img src="..." alt="Intitulé du lien 1" /></a></li>
	<li><a href="..."><img src="..." alt="Intitulé du lien 2" /></a></li>
	<li><a href="..."><img src="..." alt="Intitulé du lien 3" /></a></li>
	<li><a href="..."><img src="..." alt="Intitulé du lien 4" /></a></li>
</ul>

On utilise ensuite CSS pour positionner ce menu, mettre en forme les li, etc.
On obtient alors un menu «statique» (sans rollover), accessible (du moins pour peu que le texte dans les images ne soit pas en corps 8 ).

Reste la partie dynamique: on fait un script JS externe, qui va se charger:
- de précharger les images correspondant aux états «hover», voire «active» si on veut faire des boutons à trois états;
- de rajouter les event listeners qui vont bien sur les liens;
- de modifier les attributs "src" des images en fonction de l'évènement déclenché.

Bon, ça peut paraitre un peu fastidieux à mettre en place, mais une fois qu'on l'a fait (une fois qu'on a créé le script qui va bien... ou récupéré et compris un script bien fait!) ça fait un élément réutilisable pour d'autres projets.

Yes !

C'est pil poil ce que j'attendais...

Jvais ester tout cela FV !

Woop