headerIMG

B2B Articles - May 15, 2011

Hide broken images using javascript

As part of our web design tips and tactics guide, here is a sometimes useful javascript technique of hiding broken images and their ALT text. This can be useful ( as a quick, temporary fix) when pulling from another source such as a dynamic array or a database output which may have a few broken paths. This can also be used as a bulletproofing technique for interface design as a temporary solution when dealing with tricky image sources.

<img src="#" alt="I WANT TO HIDE THIS WHEN THE IMAGE IS BROKEN" onerror="this.style.display='none'">

Here is the snippet:

onerror="this.style.display='none'"

The onerror event is supported in all major browsers.

Ironpaper, Webintel:
SUBJECT: web design guide

Tel 212-993-7809  

Ironpaper ®
10 East 33rd Street 
6th Floor
New York, NY 10016
Map

Ironpaper - B2B Agency

B2B Marketing and Growth Agency.

Grow your B2B business boldly. Ironpaper is a B2B marketing agency. We build growth engines for marketing and sales success. We drive demand generation campaigns, ABM programs, B2B content, sales enablement, qualified leads, and B2B marketing efforts. 

Ironpaper Twitter Ironpaper Linkedin