HTML JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. HTML
  4. Image Error Finder


Image Error Finder

// Image Error Finder JavaScript
//  If there is a broken-image then you can replace that image by a custom image.
//  Works with IE only.
// (c) 2002 Premshree Pillai,
// Created : July 4th, 2002
// Web : http://www.qiksearch.com,
//       http://javascript.qik.cjb.net,
// E-mail : qiksearch@rediffmail.com
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  {
   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;









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.


The only drawback is that if your image has dimensions of 28 x 30, even if it exists the script will treat it as a broken-image. But there is a solution! You can prevent the script from checking for such scripts by placing an attribute-value pair nc="1". To use the script properly, here are the guidelines :

        
  • Do not specify the width and height attributes in the <IMG> tag. (The browser will render the image with its actual size)

    •     
  • If, you have an image with dimensions 28 x 30, then add the attribute-value pair nc="1" in the <IMG> tag. The script will ignore such images.


For example consider an image, "trial.gif" that does not exist. It is written as: <img src="trial.gif" alt="Trial Image">.This is how it will show up :



The above image is the custom image image_nf.gif that is displayed because the image "trial.gif" could not be found.

© 2002 Premshree Pillai.