/    Sign up×
Community /Pin to ProfileBookmark

Replacing those "image missing" icons

Copy linkTweet thisAlerts:
Sep 27.2004

I am working on a server-side database-driven website. When a user requests a certain page, the database forms the page and sends it. This page may include images that may currently not exist on the server. I have no way of knowing that ahead of time. What I am asking is this: Is thee any way I can tell the browser to display a pre-canned image (that I can provide) if the actual image is missing?

For example, if the page has the tag: <img src=”blabla.jpg” /> and when the browser requests the file blabla.jpg, the server responds with file-not-found. Then, the browser substitutes my pre-canned image, and the user never sees the ugly icon with the X in the middle.

Would something like this work:

<img src=”blabla.jpg” onError=”replace()” />

and the replace() function simply tells the browser:

document.images[4].src=”precanned.jpg”

or whatever?

However, I need a solution without changing the img tag, because that tag is created by the server and I have no access to it. Is there a way to capture the image onError event in the entire document and do the replace() thingy as above?

Thanks.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycSep 27.2004 — No, nothing that simple I'm afraid. What's the serverside scripting language, and what's the server OS?
Copy linkTweet thisAlerts:
@steelersfan88Sep 27.2004 — &lt;!ELEMENT IMG - O EMPTY -- Embedded image --&gt;
&lt;!ATTLIST IMG
%attrs; -- %coreattrs, %i18n, %events --
src %URI; #REQUIRED -- URI of image to embed --
alt %Text; #REQUIRED -- short description --
longdesc %URI; #IMPLIED -- link to long description
(complements alt) --
name CDATA #IMPLIED -- name of image for scripting --
height %Length; #IMPLIED -- override height --
width %Length; #IMPLIED -- override width --
usemap %URI; #IMPLIED -- use client-side image map --
ismap (ismap) #IMPLIED -- use server-side image map --
<i> &gt;</i>

It also gives the img tag access to event handlers, including:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)[/quote]The onerror event is an event handler of the window object only!
Copy linkTweet thisAlerts:
@karayanauthorSep 27.2004 — The alt attribute only points to alternate text to be inserted if the browser cannot display images (the old LYNX comes to mind :-)

Regarding the server-side scripting, the pages are generated by Miva, a piece of online store implementation software. They use something called mivascript. I can actually hack their master file to modify that specific img tag code, but I'd rather not. It also seems that it would do me no good, as the onError event does not get fired by an error downloading an inexisting image in the img tag. Or does it?

And if I capture the onError event for the window, how would my handler know that the error is indeed because of that missing image and not something else in the window?
Copy linkTweet thisAlerts:
@JPnycSep 27.2004 — Well it would be relatively easy to do in serverside scripting, to search for the file in the directory it's supposed to be in, and if it's not there, then replace it. I work in a windows-based shop, so I only know how to do it ASP on a windows OS, but there's people here who know most every language, except this proprietary one you've just mentioned.
Copy linkTweet thisAlerts:
@CharlesSep 27.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<title>Example</title>

</head>

<body>

<ul>

<li><img alt="" src="missing.png"></li>

<li><img alt="" src="missing.png"></li>

<li><img alt="" src="missing.png"></li>

<li><img alt="" src="missing.png"></li>

</ul>

<script type="text/javascript">

<!--

i = 0;

while (e = document.images[i++]) {e.onerror = function () {this.src = 'http://www.webdeveloper.com/forum/images/icons/icon9.gif'}}

// -->

</script>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@karayanauthorSep 27.2004 — Beautiful! Works like a champ! Why didn't I think of that?

Thanks, Charles!
×

Success!

Help @karayan 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.20,
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,
)...