[Javascript] XHTML Compliant img onError?

Discussion in 'Web Design & Coding' started by SPeedY_B, Apr 25, 2005.

  1. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    Presently, I have the following code to replace images which are not available:
    Code:
    [b]Head[/b]
    <script language="JavaScript" type="text/javascript">
    function noImage(theImage) { theImage.src = "images/offline.png"; }
    </script>
    
    [b]Img Code[/b]
    <img src="[i]whatever[/i]" alt="img" onError="noImage(this);" />
    which works perfectly, however onError within an img tag isn't XHTMLv1.1 compliant, therefore does anyone know of a different way this can be done, which is compliant?
     
  2. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    there could be a css way to do it, but I dont know of any off the top of my head though.
     
  3. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Since attributes have to be lowercase, try onerror rather than onError.
     
  4. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    It's not the case, just the fact that "onerror" doesn't exist as an attribute:
    :)
     
  5. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    XHTML 2.0 allows you to specifiy another image (or anything else) as the alt... not much help maybe, but somthing to think about

    *looks around*
     
  6. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    *declares document XHTML 2.0*

    Hmmm, would be rather handy.
     
  7. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    try
    Code:
    onerror="javascript:noImage(this);"
    
    don't think that will work
     
    Last edited: Apr 25, 2005
  8. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    You're right.

    Just had a quick read on XHTML 2.0, seems interesting... no img tags, etc. :)
     
  9. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    yeah XHTML 2.0 will use the object tag and you will specify a mime type for the object so for a jpeg image you would use something like
    <object type="image/jpeg" href="image.jpg"/>

    problem though for internet explorer though as it assumes the object tag is for embedding activex controls.... yay
     
  10. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    It sure does. Stupid thing. IE6 is causing me an evil headache tonight, f---ing thing.

    This javascript is needed for the new version of Camportal (w00!) which works great with Gecko and KHTML, yet when it comes to IE, it all goes wrong, and I really give up trying to fix it.

    Anyway, back on topic....

    :p
     
  11. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Offtopic:

    Mind pointing me in the direction of that XHTML topic?
     
  12. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
  13. try this,
    Code:
    <img name="img1" src="blah.jpg" alt="Picture" onError="document.images.img1.src='blah2.jpg';/>
    
     
  14. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    That's not going to work, onerror is the attribute causing the problem.
     
  15. oh i see, then maybe the xhtml version?
     
  16. Khayman

    Khayman I'm sorry Hal... Political User Folding Team

    Messages:
    5,518
    Location:
    England
    Thats what hes trying to find!
     
  17. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    XHTML 2.0 will allow for this:

    Code:
    <object data="rides.mpeg" type="application/mpeg">
        <object data="rollercoaster.jpg" type="image/jpg">
            Jack tries to expand his horizons on the racing coasters.
        </object>
    </object>
    Which means that if the mpg can't be loaded it tries the image, if the image can not be loaded, it shows the text. Same can be used to have an image as a fall back if another does not exist.

    I am starting to like XHTML 2.0 allready :p
     
  18. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    You are using php, why not just have it check for the existence of the image, and if it doesn't exist, have it load the noimage image.

    PHP:
    <?php
    $image_path
    ='/path/to/image.jpg';
    if (
    file_exists($image_path)) {
      echo 
    "<img src=\"$image_path\" alt=\"img\" />";
    }
    else {
      echo 
    "<img src=\"images/offline.png\" alt=\"img\" />";
    }
    ?>
     
  19. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
  20. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    Of course they're remote images.

    Yes, I've already considered making the server remotely connect to each to check it's existence, but with a possible 50+ images viewable, and multiple users, it's a bit pointless.