Attribut ALT sur une image

Version imprimable

13/06/2010, 10h28
lelectronique.com

Attribut ALT sur une image

BOnjour,

J'ai un petit soucis avec IE8, en effet j'ai mis en place un petit script jquery afin d'afficher du texte au survol de la souris sur la carte de france de cette page http://www.comparateur-de-velo.com/magasin-velo/ le résultat est impécacable sous Chrome et Firefox mais sous IE il affiche le rectangle jaune :( exist'il un moyen pour ne pas afficher ce rectangle jaune afin d'avoir juste l'effet jquery ?

Merci d'avance pour votre aide
Bon dimanche

Ludo
14/06/2010, 10h37
devyan

Bonjour,

Pour IE utilises l'attribut "title" à la place(en plus) de "alt" ça devrait fonctionner ;)

devyan
14/06/2010, 20h04
lelectronique.com

j'utilise déjà title, et non pas la balise alt :(
15/06/2010, 09h55
devyan

Utilises les 2 et cela devrait fonctionner pour tous les navigateurs
16/06/2010, 18h21
lelectronique.com

je viens d'essayer en rajoutant la balise alt comme conseillé mais j'ai toujours ce doublon dans IE :(
16/06/2010, 19h50
ok.Idriss

Bonsoir.

À ma connaissance, le contenu de l'attribut alt devrait apparaître lorsque l'image n'est pas affichée et le contenu de l'attribut title doit s'afficher lorsque l'on passe la souris sur l'image.

Cordialement,
Idriss
16/06/2010, 20h02
RomainVALERI

As-tu besoin de cet attribut title ? Utilise alt à la place, quitte à modifier les bouts de code qui pointaient sur title... ^^
16/06/2010, 22h23
Bovino

Hum :koi:

Si j'ai bien compris, le problème vient du fait que pour IE, l'attribut alt se comporte comme un title. Il s'agit donc d'empêcher l'affichage de la bulle et pas de le forcer :)

Le seul moyen est de ne pas mettre d'attribut alt (éventuellement, si tu utilises un langage serveur, conditionne la présence du alt au navigateur), mais du coup, ce n'est pas valide W3C...
17/06/2010, 01h02
RomainVALERI

On peut peut-être désactiver le comportement par défaut du survol de l'élément (l'affichage de l'infobulle en question), en terminant le gestionnaire lié à onmouseover par un return false;

Qu'en pensez-vous ?
17/06/2010, 10h05
devyan

Bonjour,

Au temps pour moi, j'avais mal compris :oops:

Donc le problème n'est pas d'afficher le title avec IE mais de l'empêcher d'afficher la bulle d'aide lors du survol :)

Normalement si l'attribut "alt" est vide la bulle n'est pas affichée. Donc si lors du survol tu supprime le contenu de alt cela devrait faire l'affaire.

devyan
20/06/2010, 16h35
HiRoN

Bonjour,

Citation:

Envoyé par RomainVALERI

On peut peut-être désactiver le comportement par défaut du survol de l'élément (l'affichage de l'infobulle en question), en terminant le gestionnaire lié à onmouseover par un return false;

Bonne question... C'est une astuce a essayé ;)
24/06/2010, 08h18
lelectronique.com

je suis tout a fait pret à essayer qu'est ce que je peux mettre comme code ?
merci d'avance
ludo

1 pièce(s) jointe(s)

Bonjour,

Je viens de réaliser le test suivant (avec la DTD Strict ou Transitional il n'y a pas de différence à part le centrage de l'image) ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">		
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <title></title>
    <style type="text/css">
      table {border-collapse:collapse;}
      th, td {border:medium solid black; text-align:center; vertical-align:middle;}
      th {width:125px; background-color:#E1E1E2;}
      th.nob {width:250px; border-style:none; background-color:transparent;}
      td {color:darkgreen;}
      td.err {color:red;}
    </style>
  </head>
  <body>	
	<table>
		<tr><th class="nob">&nbsp;</th><th>Attribut title</th><th>FF2.0</th><th>FF3.6.4</th><th>IE6</th><th>IE7</th><th>IE8</th></tr>
		<tr><th><img src="http://www.developpez.net/template/images/logo.gif" 
     alt="texte du alt" /></th><th>non présent</th><td>rien</td><td>rien</td><td class="err">"texte du alt"</td><td class="err">"texte du alt"</td><td>rien</td></tr>
		<tr><th><img src="http://www.developpez.net/template/images/logo.gif" 
     alt="texte du alt" title="texte du title" /></th><th>"texte du title"</th><td>"texte du title"</td><td>"texte du title"</td><td>"texte du title"</td><td>"texte du title"</td><td>"texte du title"</td></tr>
		<tr><th><img src="http://www.developpez.net/template/images/logo.gif" 
     alt="texte du alt" title="" /></th><th>présent mais vide</th><td>rien</td><td>rien</td><td>rien</td><td>rien</td><td>rien</td></tr>
	</table>
  </body>
</html>

Donc il semblerait que à partir de IE8 le comportement soit similaire à celui de FF.
Quelle que soit la version, il suffit donc que l'attribut TITLE soit présent mais vide pour éviter l'affichage de la bulle.

devyan

EDIT : ajout du tableau récapitulatif (rendu du code html de test)

24/06/2010, 12h45
Erwan31

Bonjour,
comme le précise Bovino je crois, le comportement d'IE7/6 au niveau des alt n'est pas standard, il faut donc effectivement empêcher l'info-bulle de s'afficher sur ces 2 navigateurs via les commentaires conditionnels qui vont bien.

Il ne faut surtout pas retirer l'attribut alt qui est nécessaire dans d'autre contextes d'utilisation (sans images, via un navigateurs textes ou une synthèse vocales qui lira le contenu des alt) ou pour les robots d'indexation.
D'autre part pour des raisons d'accessibilité (encore) les AREA devraient être déclarés par département selon un ordre alphabétique et non topographique, et accompagné éventuellement d'une explication préalable (masqué dans un contexte d'utilisation standard).