Insérer un lien dans une DIV

Bonjour à tous,

J'en profite avec ce nouveau sujet pour me présenter. Arnaud, récemment diplômé et webmaster dans une association.

Le problème que je souhaite vous exposer est le suivant :

Sur ma page d'accueil, j'ai donc une <div></div> où s'affiche une image que j'appelle dans ma feuille de style.

Je souhaite mettre un lien sur cette image. Je mets donc mon lien dans ma div, mais visiblement celui-ci n'est pas reconnu. (alors que si j'entoure ma div de mon lien, l'image est cliquable et me dirige vers ma page. Toutefois, cela ne me semble pas très valide).

C'est pourquoi j'aimerais savoir comment bien construire mon lien à l'intérieur de ma div, et savoir quoi définir dans ma css (sachant que je ne veux pas d'effet une fois que l'on a cliqué ou au survol mis à part une info-bulle mais cela est une autre étape ...).

J'espère avoir été clair dans ma question et ne pas avoir "pollué" le forum d'un sujet déjà résolu mais je n'ai pas trouvé réponse à question.

Merci d'avance pour vos réponses.

FNATH a écrit :
J'espère avoir été clair dans ma question et ne pas avoir "pollué" le forum d'un sujet déjà résolu mais je n'ai pas trouvé réponse à question

Aucune question légitime ne pollue ce forum. Par contre la question «une div dans un lien» ou «lien sur toute une div» a déjà été posée moult fois, effectivement. En général on y répond avec soit la réponse courte, soit la réponse longue, soit les deux.

La réponse courte, c'est:

a#blabla {
	display: block;
	width: ...;
	height: ...;
	background: url(...);
}

La réponse longue, c'est: la solution ci-dessus pose un grave problème d'accessibilité. On peut soit adopter une solution un peu plus accessible (technique de remplacement d'image... faire une recherche) ou la seule solution réellement accessible: image dans le code HTML, lien autour, et si on a besoin d'un effet de rollover on le fait en Javascript.
Modifié par Florent V. (21 Apr 2008 - 16:36)

Merci beaucoup,

J'opte donc pour la seconde solution.

Ne pas oublier le texte alternatif de l'image:

<a href="contact.html">
	<img src="images/bouton-contact.png" alt="Nous contacter" />
</a>

Oui bien sur je dois renseigner le "alt" pour l'image mais j'ai deux petites interrogations :

Pour mon lien, est-ce que je renseigne également un texte alternatif (title="...").

Et pour que mon image ne soit pas entourée du lien ? Je pense que cela se passe dans ma css, (text-decoration : none;) ?

Merci d'avance.

a écrit :
Pour mon lien, est-ce que je renseigne également un texte alternatif (title="...")

Dans le cas d'un lien ("Nous contacter"), cela ne me semble pas nécessaire. Cela devient nécessaire si l'information n'est pas totalement transmise par l'intitulé du lien (l'alternative textuelle dans ton cas).

<edit>Sous limite de ne pas mettre un parpin de texte dans le title. </edit>

a écrit :
Et pour que mon image ne soit pas entourée du lien ? Je pense que cela se passe dans ma css, (text-decoration : none;) ?

Plutôt un "border: none;" pour l'image concernée.
Modifié par yodaswii (22 Apr 2008 - 09:15)

a écrit :
La réponse courte ... pose un grave problème d'accessibilité.

En quoi la réponse courte pose-t-elle un grave problème d'accessibilité (en considérant que le contenu n'est pas relégué en une simple image de fond) ?

<oops>Désolé, j'ai lu le sujet un peu vite il s'agit de mettre un lien sur une image ... donc oui procédé des plus inaccessibles la réponse courte ! </oops>
Modifié par yodaswii (22 Apr 2008 - 09:54)