Clever Geek Handbook

No overlap and border of image in Internet Explorer

In cases where a missing image (a broken image link) is placed in Internet Explorer, it displays a cross and border.

Can this cross and border be removed for broken images?

Internet Explorer 7 Image http://img295.imageshack.us/img295/3029/internetexplorer.png

See below how it looks on firefox

Corrected Firefox Image http://img31.imageshack.us/img31/1123/firefoxg.png

We need to get rid of the border and cross the broken image. Could this be fixed with CSS?

+2


source to share


2 answers


I think you should be using javascript. You can use something like this:

var imgs = document.getElementsByTagName("img");

for (i = 0; i < imgs.length; i++) {
    imgs[i].onerror = function () {
        imgs[i].parentNode.removeChild(imgs[i]);
    }
}


with this function you will delete all images with errors.

+3


source


Based on your comment, why can't you just check if the image in the server-side script exists before HTML output? There should be no significant overhead.

In PHP, it would be something like:



<?php
if (file_exists($imgUrl)) {
    echo '<img src="', $imgUrl, '" alt="" />';
}
?>
+2


source






More articles:


All Articles