Monday, September 29, 2008

Hide or change an image if not found on client side

We had a case in a project where images were loaded from external sources and we wanted to hide or change the image on client side with javascipt in case the image is not found or there was an error loading it.

It can be easily done using the "onerror" event with image tag.
For example:

<asp:image id="imgImgMap" onerror="hideImage(this)" runat="server" cssclass="destMapImg">

<script type="text/javascript">
function hideImage() {
//Load another image etc.
}
</script>

No comments: