Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Image Error Finder

    This JavaScript checks if all the images in the document exists. If a particular image does not exist, that image will be replaced by a custom image! Works with IE only.

    This is how it works. In IE, if a particular image does not show up, then its dimensions are 28 x 30 (without the 'alt'). So, the script checks all images with this size after removing the 'alt' tag. If such an image exists, it is a broken-image.

    Code:
    <script language="JavaScript">
    function checkImages()
    {
     if(document.getElementById)
     {
      var imagesArr = new Array();
      var setDefaultErrImg="image_nf.gif"; // Default image to be displayed on error
      var setDefaultErrTxt="Image Not Found"; // Default text to be displayed on error 
      imagesArr = document.getElementsByTagName("img");
      for(var i=0; i<imagesArr.length; i++)
      {
       if(!imagesArr[0].getAttribute("nc")=="1")
       {
        var tempImgAttrib=imagesArr[i].getAttribute("alt");
        imagesArr[i].setAttribute("alt","");
        if(imagesArr[i].width=="28" && imagesArr[i].height=="30")
        {
         imagesArr[i].src=setDefaultErrImg;
         imagesArr[i].setAttribute("alt",setDefaultErrTxt);
        }
        else
        {
         imagesArr[i].setAttribute("alt",tempImgAttrib);
        }
       }
      }
     }
    }
    
    window.onload=checkImages;
    </script>
    When you use the script you will require your custom image (image_nf.gif, here)


  • #2
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    it's a good idea, but it's a bad way of going about it, i think, because it limits it only to IE, and only to images that haven't had their size attributes set, or don't have alt tags.

    Image objects have an onerror event handler, which means you could simply loop through all the images in a document, and set their onerror handlers to a particular function.

    eg:

    Code:
    for (var i = 0; i < document.images.length; i++;) {
            document.images[i].onerror = function() {
                this.src = './path/to/picture.gif';
                }
    the problem with that is, if you put that into a window.onload event handler, then all of the images will already have been loaded, and it will have no effect. also, simply putting it in the head of the page, will lead to problems, because none of the pictures have been defined yet.

    so how do you solve this problem?

    well, actually the answer (or, the answer that i've come up with anyway), is part of another problem.

    looping through every image on the page could possibly cause problems, if the particular image that can't be found, is in some way important to lay out. Spacers in tables, for example. You probably don't really want every image on the page to have this error handler. so, the answer seems to be singling out the most important pictures on a page, and giving them the error handler.

    Definitely not the best solution, but a workable one.
    Last edited by joh6nn; 07-11-2002 at 08:00 PM.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •