[Solved] Placeholder for Broken Images

[hacker]

Does anyone know of a way to have a placeholder (some sort of box, say with a red border) show up where a broken image would be?

I find that if there is a broken image in the content of a page that I am editing, unless I specifically view the HTML and check all images, there isn't a way to know if any images are broken.

Shawn

[Rumen]

Hi Soatley,

You can use the following code to assign an onerror event to all images in the RadEditor's content area:

<script type="text/javascript">
function OnClientLoad(editor)
{
    var images = editor.get_document().getElementsByTagName("IMG"); //get reference to all images in the content area

    //assing the onerror event to each image and set a red border if the image url is not valid
    for (i=0;i<images.length;i++)
    {
        if ($telerik.isIE)
        {
            images[i].onerror = function()
            {
                this.style.border = "1px solid red";
            }
        }
        else
        {
            images[i].addEventListener('error', function() {this.style.border = "1px solid red";}, false);
        }
    }
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server"  OnClientLoad="OnClientLoad">
    <Content>
        <img src="http://demos.telerik.com/aspnet-ajax/editor/Img/productLogoLight.gif" > <img src=""> <img src="fake.url" >
    </Content>
</telerik:RadEditor>

The solution is based on the following article: JavaScript onerror Event. For your convenience I have attached my test page.

Sincerely,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[hacker]

Hi Rumen,

I can see that for the 2 bad src attributes, that event would fire, but what if you tried to have an image that no longer exists:
http://demos.telerik.com/fileNotFound.gif

Would it fire for that one too?

Shaw

[Rumen]

Hello Shaw,

Yes, the event will fire for this image too.

Regards,
Rumen
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.