Image Error Finder
<html>
<head>
<title>Image Error Finder</title>
<script language="JavaScript">
// 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<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>
</head>
<body bgcolor="#FFFFFF">
<br>
<br>
<table width="450" align="center"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
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.
<br><br>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.
<br><br>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 <font face="courier" color="#0000FF">nc="1"</font>. To use the script properly, here are the guidelines :
<ul>
<li>Do not specify the <font face="courier" color="#0000FF">width</font> and <font face="courier" color="#0000FF">height</font> attributes in the <IMG> tag. (The browser will render the image with its actual size)</li>
<li>If, you have an image with dimensions 28 x 30, then add the attribute-value pair <font face="courier" color="#0000FF">nc="1"</font> in the <IMG> tag. The script will ignore such images.</li>
</ul>
For example consider an image, "trial.gif" that does not exist. It is written as: <font face="courier" color="#0000FF"><img src="trial.gif" alt="Trial Image"></font>.This is how it will show up :<br><br><img src="trial3.gif" alt="Trial Image">
<br>The above image is the custom image <font face="courier" color="#0000FF">image_nf.gif</font> that is displayed because the image "trial.gif" could not be found.
<hr style="color:#FF9900">
<a href="http://www.qiksearch.com"><font color="#808080">© 2002 Premshree Pillai.</font></a>
</font>
</td></tr></table>
</body>
</html>
Related examples in the same category
