Menu tout en image avec texte inclus

Bonjour a tous !

J'ai fait pas mal de recherches sur Google et sur ce forum, sans trouver la réponse exacte a ma question, alors je me tourne vers vous car je pense que c'est loin d'etre un probleme insurmontable.

Donc voila, j'ai un site avec un menu général avec trois entrées, pour le moment le code html est de cette sorte :

<div class="menu">
      <ul>
            <li>
                  <a href="#"><img src="#"></></a>
                  <a href="#"><img src="#"></></a>
                  <a href="#"><img src="#"></></a>
            </li>
      </ul>
</div>

Bref, les images en dur, rien d'apparent pour les robots, et pas d'effets au survol du menu.

Ce que j'aimerais faire, c'est donc avoir le meme menu, mais avec les images qui s'animent au survol.
Je pensais utiliser une seule image plus large ou plus haute pour chaque élément du menu comme dans la méthode "La méthode des portes coulissantes", mais ici ce serait plutot la technique "tout image" qu'il me faudait. J'ai essayé sans succes, je ne sais pas comment styliser tout ca pour que ca marche.

Enfin pour que ce menu soit visible dans le code, je pensais utiliser la méthode décrite ici, en inscrivant donc le titre du menu dans le code mais en ajoutant

overflow:hidden;

dans le css.

Mais bref, je n'y arrive pas, je ne sais pas pourquoi mais ca ne va pas. Quelqu'un pourrait il donc m'aider ?

Merci !

Pas vraiment bien compris le problème...

Mais ton code a déjà quelques erreurs, avoir une liste pour le menu c'est bien, mettre tous les éléments du-dit menu dans un seul élémént de liste c'est mal. Chaque élément du menu doit être dans son propre élémént de liste.

Pour les images, tu dis qu'elle ne sont pas "apparentes pour les robots", qu'est ce que tu entend par là ? Tes images DOIVENT avoir un attribut "alt" afin d'être apparente aux robots et aux utilisateurs qui ne peuvent voir les images (lecteurs d'écrans, navigateurs en mode texte).

Pour ton problème, la technique des portes coulissantes que tu cite semble la bonne approche.

Pour que ton "menu soit visible dans le code" il faut tout simplement donner un texte alternatif aux images, via alt.

Bon, maintenant que je me relis, c'est vrai que ce n'est pas tres clair. Je me suis meme trompé pour recopier mon code, puisque chaque lien est dans un <li> différente...

Oublions donc ce passage sur les "robots", je vais essayer de reformuler : en fait je voudrais créer un menu navigation en images, sans aucun texte donc. Le titre de chaque menu fera partie de l'image, comme suggéré ici.

Seulement je n'ai pas trouvé comment faire pour créer le menu suggéré.

Est ce plus clair ?

Merci !

Bonjour,

1. Mettre le texte comme texte alternatif des images.
2. Gérer l'effet au survol (remplacement d'image) en JavaScript.

Merci pour la réponse rapide ! Mais ce n'est pas possible de tout gérer sans Javascript a partir de css en n'incluant pas le code des images dans le code html mais dans le css a la place ?

Ce serait une mauvaise idée.

Des images qui sont des éléments d'un menu, sont d'office porteuse de contenu et DOIVENT être présente dans l'HTML avec le alt qui va bien.

Gérer le texte alternatif via du JavaScript serait problématique dans le cas où JavaScript est bloqué.

Sans parler de la gestion de la zone cliquable...

Merci a vous deux.

Donc comment dois je faire ? Javascript ou pas ?

Entre temps, j'ai uploadé tout ce que J'avais fait, ca va etre plus simple pour vous de visualiser ce que je vous disais.
Et donc les premiers problemes arivent : avant meme de parler de survol, mon menu n'est pas bien placé dans Firefox, et dans IE7 non plus...

Voici donc l'adresse : qu'en pensez vous, ou dois je démarrer ?

J'ai bien regardé et essayé de valider mon code d'abord, mais il me donne des erreurs que je ne comprends pas vraiment...

La solution que t'as donné Florent pour les erreurs de code :

a écrit :
Line 50, Column 66: character "&amp;" is the first character of a delimiter but occurred as data.

le caractère "&" est un caractère réservé, il ne peut pas être utilisé seul, il faut le remplacer par "&amp;" quand il ne sert pas à préciser un caractère spécial. Dans le JS ça pose problème, problème qui peut être résolu en externalisant le JS dans un fichier dédié (et appelé similairement à une feuille de style CSS).

a écrit :
Line 119, Column 55: there is no attribute "alt".

"alt" est un attribut de img, il ne peut pas être attribué à un lien "a" (je pense que tu voulais utiliser "title").

a écrit :
Line 119, Column 200: required attribute "alt" not specified.

Par contre pour les images "alt" est obligatoire.

a écrit :
Line 119, Column 201: end tag for "img" omitted, but OMITTAG NO was specified.

Les balises simples doivent être fermée par un "/" avant le ">" en XHTML.
et non par "</>"

a écrit :
Line 185, Column 33: end tag for "ul" which is not finished.

Liste vide, elle doit comporter au moins un élément de type "li".

C'est encore moi. J'ai essayé de mettre en place la methode Javascript pour afficher des images différentes au survol, mais la méthode ne marche qu'avec Firefox et pas avec IE7. Et lorsque ca marche, c'est assez lent. J'ai donc essayé de preloader les images, sans succes.

Pouvez vous m'expliquer ou m'orienter vers une solution ?

Merci !

Pour le preload des images en JavaScript:
- le script ne doit pas être entouré par des commentaires HTML (soyons logiques: pas de commentaire HTML dans un fichier .js );
- tu définis une fonction, mais est-ce que tu appelles cette fonction à un moment ou un autre? il semblerait que non.

Pour ce deuxième point, tu pourrais avoir un simple <script type="text/javascript">preloader();</script> à la fin de ton code HTML (avant de refermer body).

Pour le rollover, le javascript: est inutile dans les attributs HTML d'évènements. Pas sûr que ça gêne IE mais vu que c'est inutile...

En passant, au sujet du site: tu as des titres codés comme des paragraphes. À corriger.
Modifié par Florent V. (13 Jan 2009 - 18:25)

Merci pour toutes ces astuces ! J'ai donc fait les modifications, je trouve ca satisfaisant dans IE7, la rapidité est correcte, mais dans Firefox ca rame...

Vous aussi ca vous le fait?

Comment puis je etre sur que le preloader fonctionne ?

jeherve a écrit :
Vous aussi ca vous le fait?

Non. Ni avec Firefox, ni avec Safari.

Bon ben ca me rassure ! Ca vient peut etre de ma connexion internet.

Je pense que je vais donc pour passer ce sujet en "réglé", merci a Florent et a Yasashii pour votre aide !

Si toutefois vous avez d'autres remarques de choses a améliorer, je suis preneur !!