<img src> tag variable

[Perplexed]

Does anyone know if it is possible to put a variable in an <img src > tag. What I want it to do is load up a certain picture ( ie <img src=abc.jpg> ) if it can find it in the directory or load xyz.jpg if abc.jpg isn't there.

Does that make sence? I have a huge catalogue ( not a sales type catalogue ) of items which I am slowly adding pictures to but it is very time consuming having to alter img tags with each new picture I add. If I could build in a line that shows the picture if it is there or a text image ( saying I dont have a picture yet )if it isnt, then all I would have to do is upload pictures as I get them.

Any ideas anyone?

[dmorison]

There is no way client side to do exactly what you want, although you could hack something together with styles, divs and javascript.

For starters, you can add onload and style tags to an <img> to prevent the standard image not found graphic (that small square thing with a red cross in the middle on IE) from showing:

<img onload="javascript:style.visibility = 'visible';" style="visibility:hidden" src="abc.gif">

If you have access to server side scripting you can have a single image serving script that serves the image requested (via a parameter) or a default image.

[waldemar]

I would prefer some php coding in this case

<?php
$filename = 'yourdirectory/abc.jpg';

if (file_exists($filename)) {
print "<img src=\"" . $filename . "\" alt=\"\" width=\"\" height=\"\">";
} else {
print "<img src=\"yourdirectory/xyz.jpg\" alt=\"\" width=\"\" height=\"\">";
}
?>

<added:>

Actually, no... after re-reading your post, I would actually create all "dummy" image files having the *real* name that you will be using and containing the "image will be available soon" text. This way you don't have to do any scripting and no later html-editing at all.

</added>

[Perplexed]

Thanks for that guys.
I really like the sound of the php solution but, to be honest, I do not understand it.

[garann]

This may be kind of a dippy solution, but it seems to work:

<div style="background:url(notFound.png) center center no-repeat;width:264px;height:84px;">
<div style="background:url(kartoffeln.png) top left no-repeat;width:264px;height:84px;"></div>
</div>

If it can't find kartoffeln.png, it just shows the background of the div kartoffeln.png sits in, which has your "Image not found" message nicely centered. It won't work if your primary image is transparent, or your primary image is smaller in dimension than your "not found" image, but it'll work for largish photos and such.

hth,
g.