Attribut ALT sur une image

**lelectronique.com** · 13/06/2010, 10h28

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

**devyan** · 14/06/2010, 10h37

Bonjour,

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

devyan

**lelectronique.com** · 14/06/2010, 20h04

j'utilise déjà title, et non pas la balise alt

**devyan** · 15/06/2010, 09h55

Utilises les 2 et cela devrait fonctionner pour tous les navigateurs

**lelectronique.com** · 16/06/2010, 18h21

je viens d'essayer en rajoutant la balise alt comme conseillé mais j'ai toujours ce doublon dans IE

**ok.Idriss** · 16/06/2010, 19h50

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

**RomainVALERI** · 16/06/2010, 20h02

As-tu besoin de cet attribut title ? Utilise alt à la place, quitte à modifier les bouts de code qui pointaient sur title... ^^

**Bovino** · 16/06/2010, 22h23

Hum

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...

**RomainVALERI** · 17/06/2010, 01h02

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 ?

**devyan** · 17/06/2010, 10h05

Bonjour,

Au temps pour moi, j'avais mal compris

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

**HiRoN** · 20/06/2010, 16h35

Bonjour,

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é

**lelectronique.com** · 24/06/2010, 08h18

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

**devyan** · 24/06/2010, 11h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**Erwan31** · 24/06/2010, 12h45

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).

Attribut ALT sur une image

HTML

Discussions similaires

Partager

Partager