web-dev-qa-db-fra.com

Comment afficher le texte alt d’une image dans chrome

L'image avec une source non valide affiche un texte alternatif dans Firefox mais pas dans chrome sauf si la largeur d'une image est ajustée.

  <img height="90" width="90"
    src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
    alt="Image Not Found"/>

Comment afficher le texte alternatif d'une image?

htmlgoogle-chrome
70
Achaius

Si je ne me trompe pas, il s'agit d'un bogue dans webkit (selon this ). Je ne sais pas si vous pouvez faire beaucoup, désolé pour la réponse faible.

Il existe cependant un moyen de contourner le problème. Si vous ajoutez l’attribut title à votre image (par exemple, title="Image Not Found") ça va marcher.

86
Prisoner

Vous pouvez utiliser l'attribut title.

<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />
24
rahul

Oui, c’est un problème lié à webkit et également signalé en chrome: http://code.google.com/p/chromium/issues/detail?id=77 Il existe depuis 2008 ... et toujours pas fixé!!

J'utilise un morceau de javacsript et jQuery pour résoudre ce problème.

function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");

Si vous voulez seulement quelques images:

addShowAlt("#myImgID");
4
Alexis

tilisez l'attribut title au lieu de alt

<img
  height="90"
  width="90"
  src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
  title="Image Not Found"
/>
4
Sukhjeevan

Voici une solution de contournement simple dans jQuery. Vous pouvez l'implémenter en tant que script utilisateur pour l'appliquer à chaque page affichée.

$(function () {
  $('img').live('mouseover', function () {
    var img = $(this); // cache query
    if (img.title) {
      return;
    }
    img.attr('title', img.attr('alt'));
  });
});

J'ai également implémenté cela sous la forme d'une extension Chrome appelée alt . Parce qu'elle utilise jQuery.live, cela fonctionne également avec le contenu chargé dynamiquement.  J'ai retiré cette extension et l'ai retirée du magasin Chrome..

4
Justin Force

Pour afficher le texte Alt des images manquantes, nous devons ajouter un style comme celui-ci. Je pense qu'il n'est pas nécessaire d'ajouter du javascript supplémentaire pour cela.

.Your_Image_Class_Name {
  font-size: 14px;
}

C'est un travail pour moi. Prendre plaisir!!!!

1
Hanuman Sahay

Internet Explorer 7 (et versions antérieures) affiche la valeur de l'attribut alt sous la forme d'une info-bulle lors du survol de l'image. Ce n'est pas le comportement correct, selon la spécification HTML. L'attribut title devrait être utilisé à la place. Source: http://www.w3schools.com/tags/att_img_alt.asp

1
diazdeteran

Différents navigateurs (mis) gèrent cela de différentes manières. Utiliser title (un ancien IE 'standard') n'est pas particulièrement approprié, car l'attribut title est un effet de survol. La solution jQuery ci-dessus (Alexis) semble sur la bonne voie, mais je ne Je ne pense pas que l'erreur se produise à un point où elle pourrait être interceptée.

$('img').each(function()
{
    $(this).error(function()
    {
        $(this).replaceWith(this.alt);
    }).attr('src',$(this).prop('src'));
});

Ceci, comme dans la contribution d’Alexis, a l’avantage de supprimer l’image manquante.

1
Cuse70

Vous pouvez mettre l'attribut title sur tag.J'espère que cela fonctionnera.

<img src="smiley.gif" title="Smiley face" width="42" height="42">
0
Nagnath Mungade