replace broken image

if you want to replace a broken image with something else based on the fact that its broken when viewed. How would you refer to "broken" in the code???

<img src="myimage.jpg" onError="this.src='anotherimage.jpg'">

you need to use javascript.

if you're writing it in the html, it would look something like this.

<img onerror="this.src='theImageYouWantToChangeTo.gif';" src="theImageThatIsBroken.gif">

please note that the order of the attributes is important, and that no matter what other attributes you use, like width or height, the green part, has to come before the red part.

Originally posted by joh6nn
please note that the order of the attributes is important, and that no matter what other attributes you use, like width or height, the green part, has to come before the red part.

:confused: strange. It always worked for me no matter where the "onerror" was

Borgtex, i rarely code the onload or onerror events into html as attributes; i'm basing that on how it works between <script> tags. if you assign a source to an image before you assign it an onload or onerror event, then the image may finish loading, before the event has been assigned, and the event won't ever fire, even if the activity it's supposed to monitor has occurred. for safety's sake, i've assumed that it works the same way as an attribute, although to be honest, i have no idea if it works that way or not.

Hey, this is pretty interesting...

You can do this in php too..<?
$var = @fopen("http://www.youraddress.com/image.jpg","r"); //-- url or path
if ($var){
print "<img src=\"image.jpg\"/>"; //-- wanted image here
}else{
print "<img src=\"alternative-image.gif\"/>"; //--alternative image here
}
?>

This is very interesting! But just wondering...how practical is this? I mean, if you have an image coded into your source hopefully you have that image uploaded too. So if that image doesn't load what are the chances of another image loading?

I kind of was confused with my own example there, but it just seems like this might only be for testing purposes rather than for actual public use?

well, i would it set it up something like this:

image.onerror = function() {
this.attempts = (this.attempts == 'undefined') ? 1 : 2;
if (this.attempts == 1) { this.src = this.src; }
else { this.visibility = 'hidden'; }
}

Originally posted by pardicity3
This is very interesting! But just wondering...how practical is this? I mean, if you have an image coded into your source hopefully you have that image uploaded too. So if that image doesn't load what are the chances of another image loading?

I kind of was confused with my own example there, but it just seems like this might only be for testing purposes rather than for actual public use?

For a server to server notification...
If I have a web server running my site, and to tell people that go to my site that my game (or another) server is up, I will display an image from that computers webserver (could just host that one image) that says "UP".

And if it's not there, then it will display the image from my computer, "DOWN"...

I think that makes sence....

That makes very much sense indeed. Thanks for the great example! :thumbsup:

Na, see

The code that calls the image contains a function and include
see theres like 200 of these and not all have images from the database that its calling from and i dont want them to show broken images on the ones i havent gotten to yet. I'm building this directly off the server so its not a matter of uploading.

<img onerror="this.src='http://www.website.com/images/boxes and lines/whitebox.gif';" src="http://www.website.com/products<%= oWEB.fnGet_Product_Image_URL(CStr(TWO("PRODUCT_ID"))) %>" width="70">

wait, what's the problem?

no problem