Determine if image source exists?

[Rick Brandt]

I have a list of dynamically generated Parts that can be used to add to an
Order. The list includes an image with the src set to
"WhateverThePartNumberIs.png" in a particular folder.

Not all part numbers have images so the alt text "No Image Available" is
displayed in those cases.

Can my JavaScript onclick code "know" when the image clicked on is actually
displaying an image and not the alt text? I open a window with a larger
version of the image in this event and would like to NOT do so when there is
no image.

TIA

 

[Matt Kruse]

Can my JavaScript onclick code "know" when the image clicked on is
actually displaying an image and not the alt text?

Sort of. Example:

<img src="/asdf.jpg" alt="Alt Text" onclick="alert('onclick')"
onerror="this.onclick=null">

 

[Michael Winter]

I have a list of dynamically generated Parts that can be used to add
to an Order.

What generates these parts? The server?

The list includes an image with the src set to
"WhateverThePartNumberIs.png" in a particular folder.

Not all part numbers have images so the alt text "No Image Available"
is displayed in those cases.

Based on that description and the subject of your post, I'd have to
assume then that you generate markup such as,

<img alt="No Image Available"
src="image-that-does-exist.png">

which is inappropriate. The alternative text should be a replacement for
/that/ image, not some generic comment. In this case, it should be
something more like "Profile shot of [product name]." or, depending on
how the image is presented, an empty string.

If no image is available - to be determined whilst generating the
content - then the img element shouldn't be present at all, only the
text, "No image available."

[snip]

Mike

 

[Erwin Moller]

I have a list of dynamically generated Parts that can be used to add to an
Order. The list includes an image with the src set to
"WhateverThePartNumberIs.png" in a particular folder.

Not all part numbers have images so the alt text "No Image Available" is
displayed in those cases.

Can my JavaScript onclick code "know" when the image clicked on is
actually
displaying an image and not the alt text? I open a window with a larger
version of the image in this event and would like to NOT do so when there
is no image.

TIA

Hi,

Yes, it is possible.
You can add an eventhandler to your window that fires your own function if
any error occurs.
window.onerror = yourHandler;

or you can add the handler to an image, which is maybe more appropriate.
Read more here:
http://www.faqts.com/knowledge_base/view.phtml/aid/1799

But since you are probably working serverside already, why not do the
checking from your PHP/VB/Perl/whatever scripts on the server?
Sounds a lot easier to me and also gives a faster userexperience.
If you let JS do the checking and replacing, JS has to go to the server to
try to fetch an image, and if no succes, fetch another.
If possible, solve this serverside.

Regards,
Erwin Moller

 

[Rick Brandt]

What generates these parts? The server?

I have an XML document that is a list of parts retrieved from a database
query. That xml is styled with an XSL sheet to produce a HTML table. It is
this table that produces the img element.

The database has no idea whether there is an image file for any particular
part number. We only know that if there is an image that it will be a png
file with the same name as the part number. So the src is always set to
that string value and when there is no image we see the alt text.

I would just like to NOT execute the code for displaying the larger image
when in fact there is no image to display.

The list includes an image with the src set to
"WhateverThePartNumberIs.png" in a particular folder.

Not all part numbers have images so the alt text "No Image Available"
is displayed in those cases.

Based on that description and the subject of your post, I'd have to
assume then that you generate markup such as,

<img alt="No Image Available"
src="image-that-does-exist.png">

which is inappropriate. The alternative text should be a replacement
for /that/ image, not some generic comment. In this case, it should be
something more like "Profile shot of [product name]." or, depending on
how the image is presented, an empty string.

If no image is available - to be determined whilst generating the
content - then the img element shouldn't be present at all, only the
text, "No image available."

When the content is generated we do not have the information about whether
the image exists.

 

[Rick Brandt]

Yes, it is possible.
You can add an eventhandler to your window that fires your own
function if any error occurs.
window.onerror = yourHandler;

I will look into this, thanks.

or you can add the handler to an image, which is maybe more
appropriate. Read more here:
http://www.faqts.com/knowledge_base/view.phtml/aid/1799

But since you are probably working serverside already, why not do the
checking from your PHP/VB/Perl/whatever scripts on the server?
Sounds a lot easier to me and also gives a faster userexperience.
If you let JS do the checking and replacing, JS has to go to the
server to try to fetch an image, and if no succes, fetch another.
If possible, solve this serverside.

Regards,
Erwin Moller

I'm a bit new to this so perhaps the question doesn't seem logical. My
thinking was that the HTML document seems to "know" when there is no image
because it is displaying the alt text in its place. I just thought there
was a way for my script to "see" the same thing the users can see and simply
do nothing unless a thumb image is being displayed.

This table is not being built server side. I am creating it by processing
an XML document via an XSL sheet on the client. The XML document does not
contain any information about whether there is an image file available for
the part. We only know that IF there is an image it will have the part
number as its name.

 

[TC]

I have an XML document that is a list of parts retrieved from a database
query. That xml is styled with an XSL sheet to produce a HTML table. It is
this table that produces the img element.

The database has no idea whether there is an image file for any particular
part number. We only know that if there is an image that it will be a png
file with the same name as the part number. So the src is always set to
that string value and when there is no image we see the alt text.

Is this right: the images are on the server, and you want the
javascript on the /client/ to behave differently, depending on whether
the relevant image is or is not on the /server/?

If so, I think you should try to do the check on the server - not the
client. Isn't there some way for your database code to check for the
images, and include that information in the XML? Perhaps each node
could have a new element 'hasImage', or somesuch. Then the XSL could
translate that into different HTML.

Or could a seperate process on the server take the current XML result,
check for the relevant images, then merge-in those results, before
returning the XML to the client?

Just some ideas, I'm no expert on this.

HTH,
TC (MVP MSAccess)
http://tc2.atspace.com