/    Sign up×
Community /Pin to ProfileBookmark

Image source

Copy linkTweet thisAlerts:
Oct 20.2006

I am looking to change the source of an image or several images. My website displays a table of ten images (01.jpg, 02.gif… 10.jpg) I want the html or JavaScript to change the image source according to what is available. For instance if the 01.gif is not available then to default to the 01.jpg picture. If the 01.jpg is not available to default to an error.jpg. I initially had this html:

[CODE]<img src=”01.gif” id=”01″ alt=”pic” onerror=”src=’01.jpg'”>[/CODE]

Then I tried some JavaScript to include the error image and received an error message. Here is the code:

[CODE]<script type=”text/javascript”>

function changesource(){

try
{

document.getElementById(“01”).setAttribute(“src”, “01.jpg”);

}
catch(error)
{
document.getElementById(“01”).setAttribute(“src”, “error.jpg”);

}
}

</script>

</head>

<body>
<img src=”01.gif” id=”01″ alt=”pic” onerror=”changesource()”>
</body>
</html>[/CODE]

I understand the “Stack overflow” error message I am receiving however I am not sure of another way to go through the images. Any suggestions will be very helpful. Thanks.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Arty_EffemOct 20.2006 — Try:[CODE]<img src="01.gif" id="01" alt="pic" onerror="changesource(this, '01.jpg', 'error.jpg')">

function changesource(elem,alt1,alt2)
{
elem.onerror=null;

try
{
elem.src=alt1;
}
catch(error)
{
elem.src=alt2;
}
}

[B][/CODE][COLOR=Red](Totally untested)[/COLOR][/B]
Copy linkTweet thisAlerts:
@macvasauthorOct 23.2006 — Thank you Arty, however the code did not work. I do not recieve the error anymore but the third image, "error.jpg", does not show up. The first two work just fine but the third one does not show up. Thanks again.
Copy linkTweet thisAlerts:
@Arty_EffemOct 23.2006 — Thank you Arty, however the code did not work. I do not recieve the error anymore but the third image, "error.jpg", does not show up. The first two work just fine but the third one does not show up. Thanks again.[/QUOTE]The reason for that is that there is no exception thrown on load failure.

Another snag is that presumably in order to prevent this recursive programming error, Opera and firefox restrict the onerror event for images. I have not made any exhaustive tests, but Opera appears to fire it once, FX not at all.

That said, the following works as required with I.E., Opera will try to load the first alternative image.[CODE]<img src="01.gif" id="01" alt="pic" onerror="ChangeSource.to(this, 'replacement1.jpg', 'replacement2.jpg')">

<SCRIPT type='text/javascript'>

ChangeSource=
{
elemTable:[],

to:function(elem, alt1, alt2)
{
for(var i=0; i<this.elemTable.length && this.elemTable[i]!=elem; i++)
;
if( i==this.elemTable.length )
{
this.elemTable[this.elemTable.length]=elem;
elem.src=alt1;
}
else
{
elem.onerror=null;
elem.src=alt2;
}
}
}
</SCRIPT>
[/CODE]
Copy linkTweet thisAlerts:
@macvasauthorOct 23.2006 — Thank you so much Arty. It works just great.
Copy linkTweet thisAlerts:
@Arty_EffemOct 23.2006 — Thank you so much Arty. It works just great.[/QUOTE]
I've just done some research and testing, and it seems that for non-local images, events are always called on all major browsers, so there's no problem.

Always define or include the script before any image tags.
Copy linkTweet thisAlerts:
@macvasauthorOct 24.2006 — Thanks again Arty
×

Success!

Help @macvas spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...