Quel title est le plus important : image ou lien ?

Salut

En modifiant mon site sur mes motos, j'ai mis mes images en float, par une classe sur l'image, ce qui fait que j'ai supprimé les petits boutons dont je me servais pour indiquer que l'on pouvait voir l'image en plus grand. Ils ne suivaient pas l'image, naturellement...

Maintenant, il suffit de cliquer sur l'image

http://www.frobar.info/moto/dtmx.php

Problème, j'ai mis un title sur le lien et un sur l'image et c'est celui sur l'image qui s'affiche...

Le code

<p><a href="photos/mon_dtmx_1.jpg" title="Cliquez ici pour voir la photo en grand -800x655 53 013 octets" ><img src="mini/mon_dtmx_1p.jpg" alt="mon DTMX" title="Mon 125 DTMX version TT" class="right"/></a>
</p>

Est-ce que je peux/dois le supprimer pour afficher le title informant (automatiquement quand mon code sera plus au point) sur la taille de l'image.

Y a les fiches 167 et 79 d'Opquast en jeu là quand même

Cas de figure 1 -

<a href="#" [#blue]title="title du lien"[/#]>
   <img src="puce.png" [#red]alt="alt de l'image"[/#] [#orange]title="title de l'image"[/#] />
</a>

Firefox : affiche le title de l'image
Internet Explorer : affiche le title de l'image

Cas de figure 2 -

<a href="#" [#blue]title="title du lien"[/#]>
   <img src="puce.png" [#red]alt="alt de l'image"[/#] />
</a>

Firefox : affiche le title du lien
Internet Explorer : affiche l'alt de l'image

Donc, l'image et son title prime sur celui du lien. Ce qui explique le comportement d'IE dans le cas 2 (même si on sait qu'il se comporte mal avec les ALT).

________________________________
Bonne pratique Opquast numéro 167 :

a écrit :
Le libellé des hyperliens est représentatif de leur cible et décrit la nature du contenu vers lequel il pointe.

Le libellé d'un lien, ce n'est pas le texte dans le title, mais le texte du lien, entre les balises <a> et </a>. Ici, c'est une image qui sert de libellé. Il faut donc se servir de sont title.

Bonne pratique Opquast numéro 79 :

a écrit :
Aucun objet multimédia de plus de 50 ko (image ou autre) n'est envoyé sans avertissement préalable, prévisualisation ou affichage progressif.

Cette pratique pour conseiller d'indiquer la taille et ou le poids...

Si tu veux suivre les deux, il faut donc garder à l'esprit que ton libellé de lien est une image, ce qui n'est pas adéquat. Donc tu va recourir au title de l'image. (Ce qui permet d'uniformiser le comportement entre IE et Ff.)

Mais ce texte, il doit respecter deux règles : être bien compréhensible, qu'on sache son rôle, sa cible ; préciser les dimensions et le poids de l'image.
Ça donnerait donc :

<a href="#" title="Voir l'illustration grand modèle ? [800px * 655 px - 53 ko]">
   <img src="" alt="illustration, image-lien pointant vers grand modèle"
   title="Voir l'illustration grand modèle ? [800px * 655px - 53 ko]" />
</a>
<p>Mon 125 DTMX version TT</p>

(Le title dans la balise A sert si les images sont désactivées : dans ce cas, plus d'image, le contenu alternatif (alt) prend le relais, on perd le "title" de l'image. Il en faut donc un sur le lien pour prendre le relais.

Cette méthode respecte les deux pratiques citées, mais il faut rajouter une légende à l'image (l'inclure dans les title les allongeraient trop).
Modifié par (28 Apr 2006 - 03:09)

Merci

Par contre un doute m'habite...

Le fait de mettre en paragraphe, séparé de l'image donc, la légende fait que ce n'est plus évident que cela s'y rapporte...

Surtout que je devrais alors mettre dans un <di> le lien et le paragraphe pour qu'il flote à droite ou à gauche...

Mais je vais me pencher sur ta solution (et son automatisation PHP)

Ici, c'est vrai que rien ne confère la position de cette pseudo legende. Je dirais qu'elle est optionnelle si l'image se trouve bien à coté du texte qu'elle illustre.
La méthode la plus simple, mais pas la plus esthétique seraient de mettre la légende directement sur l'image, comme on le voit de temps en temps.

Tu peux aussi faire un truc du genre :

a écrit :
Bla bla bla bla, bla bla bla. Bla bla bla bla bla, bla bla, bla bla : bla bla bla. Bla bla bla ?
bla bla bla ! bla bla bla mon superbe DTMX (voir photo [ci-contre/ci-dessus/ci-dessous])

Les autres solutions, passant par le balisage et le CSS sont certainement meilleures, mais demanderont un peu plus de réflexion.