Image Error Finder : Image Img « HTML « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » HTML » Image Img 
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 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 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 &lt;IMG&gt; tag. (The browser will render the image with its actual size)</li>

    <li>If, you have an image with dimensions 28 30, then add the attribute-value pair <font face="courier" color="#0000FF">nc="1"</font> in the &lt;IMG&gt; 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">&lt;img src="trial.gif" alt="Trial Image"&gt;</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">&#1692002 Premshree Pillai.</font></a>
</font>
</td></tr></table>

</body>
</html>



           
         
    
  
Related examples in the same category
1.Get the file name specified in the href or src property
2.Image dynsrc
3.Low resolution Image src
4.Image Long Description
5.Image width Example
6.Does image download completely
7.Alternative Information Example
8.Image align Example
9.Image 'src' Property
10.'height' Example
11.'readyState' Example
12.'galleryImg' Example
13.Monitors the load process and the display of pictures
14.Image Animation
15.Image array
16.Replace image
17.An animating image
18.Mouse in image and out
19.Scrolling Image
20.Change the height of an image
21.Change image
22.Change image width
23.Count images in a document
24.Image Event Handling
25.Methods and Properties of the Image Object
26.Testing an Image's align Property
27.A Scripted Image Object and Rotating Images
28.Scripting image.complete
29.Changing Between Still and Motion Images
30.Simple Image Replacement
31.Image element
32.Image Roller Machine
33.Change image in mouse in and out event
34.Use array to store the image names
35.Img onmouseover and onmouseout actions
36.Change vspace for image
37.Change image src
38.Set image height
39.Set image alt message
40.Change image align
41.Change image title
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.