How to display alt text for an image in chrome

Question

The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted      lt img height  90  width  90      src  http   www google com intl en ALL images logos images logo lg gif      alt  Image Not Found   gt    How to display the alt text for an image

User · Answer

Internet Explorer 7  and earlier  displays the value of the alt attribute as a tooltip  when mousing over the image  This is NOT the correct behavior  according to the HTML specification  The title attribute should be used instead  Source  http   www w3schools com tags att img alt asp

User · Answer

Use title attribute instead of alt    lt img   height  90    width  90    src  http   www google com intl en ALL images logos images logo lg12 gif    title  Image Not Found    gt

User · Answer

Various browsers  mis handle this in various ways   Using title  an old IE  standard   isn t particularly appropriate  since the title attribute is a mouseover effect   The jQuery solution above  Alexis  seems on the right track  but I don t think the  error  occurs at a point where it could be caught   I ve had success by replacing at the src with itself  and then catching the error      img   each function           this  error function                   this  replaceWith this alt          attr  src    this  prop  src           This  as in the Alexis contribution  has the benefit of removing the missing img image

User · Answer

Here is a simple workaround in jQuery  You can implement it as a user script to apply it to every page you view     function           img   live  mouseover   function          var img     this      cache query     if  img title          return            img attr  title   img attr  alt                 I have also implemented this as a Chrome extension called alt  Because it uses jQuery live  it works with dynamically loaded content  too  I have retired this extension and removed it from the Chrome store

User · Answer

You can use the title attribute    lt 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    gt

User · Answer

If I m correct  this is a bug in webkit  according to this   I m not sure if there is much you can do  sorry for the weak answer   There is  however  a work around which you can use  If you add the title attribute to your image  e g  title  Image Not Found   it ll work

User · Answer

You can put title attribute to  tag I hope it will work    lt img src  smiley gif  title  Smiley face  width  42  height  42  gt

User · Answer

To display the Alt text of missing images  we have to add a style like this  I think  there is no need to add extra javascript for this     Your Image Class Name     font-size  14px      It s work for me  Enjoy

User · Answer

Yes it s an issue in webkit and also reported in chromium  http   code google com p chromium issues detail id 773 It s there since 2008    and still not fixed    I m using a piece of javacsript and jQuery to make my way around this   function showAlt     this  replaceWith this alt    function addShowAlt selector    selector  error showAlt  attr  src     selector  src    addShowAlt  img      If you only want one some images   addShowAlt   myImgID

User · Answer

I use this  it works with php      lt span gt  lt  php if  file exists  image    data  img name           gt     lt img src  image  lt  php echo  data  img name      gt   width  100  height  100  gt     lt  php  else    echo  Image Not Found     gt    lt  span gt    Essentially what the code is doing  is checking for the File   The  data variable will be used with our array then actually make the desired change   If it isn t found  it will throw an Exception

[html] How to display alt text for an image in chrome

Examples related to html

Examples related to google-chrome