Menu type onglet constitué d'images

Bonjour

J'essaye d'adapter ce menu réalisé à l'époque en javascript en utilisant les css. Le site est http://www.gestinfo.fr . Les onglets sont des images qui changent de couleur sur passage de la souris.

J'ai essayé de voire comment adapter les tutoriels sur les menus (notamment avec portes glissance) et sur les onglets, mais je n'ai pas vu comment en tirer partie. J'en suis à me demander s'il ne faut pas abandonner le principe des menus et afficher directement ces images, avec un lien sur click.

Quelle méthode vous semble la mieux adaptée, et comment aborder la chose?

Merci
Modifié par jacma (06 Feb 2008 - 19:51)

Bonjour,

Il y a des contraintes de design particulières? Parce que à voir le menu en place, ça ressemble juste à du texte en blanc sur fond en image, avec l'image de fond qui change au survol (et le texte qui ne change pas).

Ce qui correspond parfaitement à un des menus proposés et expliqués sur Alsacréations: Un menu graphique, avec rollover mais sans javascript.

Si on doit avoir le texte intégré aux images, par contre, il faudra passer par des images dans le code HTML, et rollover en Javascript.

Dans les deux cas, on part de la base HTML suivante (ou quelque chose de proche):

<ul id="nav">
	<li><a href="..."> ... </a></li>
	<li><a href="..."> ... </a></li>
	<li><a href="..."> ... </a></li>
	<li><a href="..."> ... </a></li>
</ul>

C'est au niveau du contenu des liens que ça se joue. Soit on peut afficher le texte directement, mis en forme par CSS, et donc on place le texte directement dans les liens, et on fera le rollover (image de fond uniquement) en CSS. Soit on doit avoir le texte intégré à l'image, et dans ce cas le contenu des liens sera du type <img src="..." alt="Intitulé de mon lien" /> et on fera le rollover en Javascript (en JS non intrusif avec un script externe, soyons fous!).

Bonjour

Merci de ta réponse. J'y vois plus clair.

Il n'y a aucune obligation pour que le texte soit intégré aux images, si ce n'est que je voulais garder les mêmes caractères. Je vais donc esayer de trouver des caractères équivalents.

En effet, c'est tout à fait l'exemple que tu cites. C'est d'ailleurs bien par là que j'avais commencé. Simplement, je n'avais pas pensé du tout à changer une part de l'image en texte . C'et fantastique comme on peut s'enfermer dans uine "logique" et comme l'oeil extérieur distingue immédiatement une possibilité...

Merci.