www.webdeveloper.com
Results 1 to 8 of 8

Thread: Broken Image Icon Replacement ?

Hybrid View

  1. #1
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374

    Broken Image Icon Replacement ?

    Is there a way to replace the image that you see in a broken image link (red "X" in IE) with one of your own ?

    I know you can use an onerror condition in the img tag to do something like this:
    Code:
    <img src="myBigImage.jpg" onerror="this.src='brokenImageIcon.jpg';">
    My problem is that the img tag source is being generated by a third party application and I do not have access to modify the actual HTML.

    I thought about creating a function that would run with a body onload condition, scanning for img tags and inserting an onerror function into each, but since this would be after the html body loads, which I assume would end up being be too late to catch an img load error.

    Is there some global onerror condition I could use ?

    Some css pseudo class trickery ?

    Any ideas ?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Only works if the image height and width are defined
    Code:
    img {background:url(brokenImageIcon.jpg) no-repeat; display:block;}

  3. #3
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Thanks Fang,

    Elegant idea, but it does not seem to work, at least not in IE7.

    Example:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<title>Broken Link Replacement</title>
    	<style>
    		img {background:url(../images/ad2.gif) no-repeat; display:block;}
    	</style>
    </head>
    <body>
    	Broken Link <img width="60" height="40" src="bob.gif"><br>
    </body>
    
    </html>
    In the above example "../images/ad2.gif" does exist, and "bob.gif" does not.

    What IE7 displays is the broken image icon (red "X") on top of the ad2.gif image which is displayed in the background of the img tag.

  4. #4
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    OK - I took the body onload approach. This seems to work
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<title>Broken Link Replacement</title>
    	<script>
    	function ImageOk(img) {
    		// Body has finished loading so if img is not complete then 
    		// you  have a broken image so return false - image is not ok
    		if (!img.complete) return false;
    		
    		// if naturalWidth is undefined or zero then the image failed to load
    		// so return false - image is not ok
    		if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
    		
    		// Passed all checks - image succeeded in loading - image is ok
    		return true;
    	}
    	
    	function BrokenImageCheck() {
    		// Name of image to replace broken image icon with
    		var replacementImg = "../images/ad2.gif";
    		
    		// Loop through all images in the document
    		for (var i = 0; i < document.images.length; i++) {
    			// If image did not finish loading
    			if (!ImageOk(document.images[i])) {
    				document.images[i].src = replacementImg;
    				// document.images[i].style.display = "none";
    			}
    		}
    	}
    	
    	// After body loads check all images to see if they sucessfully loaded
    	window.onload=BrokenImageCheck;
    	</script>
    
    </head>
    <body>
    	Broken Link <img width="60" height="40" src="bob.gif"><br>
    </body>
    
    </html>
    If you wanted to just suppress the broken image icon from appearing then comment out the .src= assignment and uncomment the display="none" assignment in the BrokenImageCheck function

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Perhaps implement the css solution for JavaScript disabled browsers.

  6. #6
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Maybe on my mobile phone browser (what I think of when people discuss JavaScript disabled browsers) the CSS approach will work with out the broken link icon floating on top of the background image.

    I'll have to check it out.

  7. #7
    Join Date
    Feb 2006
    Posts
    198
    this is a neat solution, I was always wondering if this possible..

  8. #8
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Thanks.

    I'd always wondered too. But, it's not until I had to suppress a broken image link from a dynamically created img tag (done by a third party js library), that I forced myself to actually do anything about it though

    You would think there would be an easier way of doing this than writing a function. Too bad the CSS approach did not work out. That would have been much cleaner.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles