Mobile Web: Detecting when images have been disabled

Question

I've run into a very annoying problem for mobile web. The website I have uses images for most of it's buttons, both <a href="..."><img> and <input type='image'>. Consequently, if the user disables images, the website not only does not look good, but they also lose all ability to navigate the site. In particular, Android does not display alt information on images, so there is quite effectively nothing to hint at images not displaying.

Is there some way to determine if a browser has disabled images without using JavaScript? I'd like to display a more generic text optimized site if they have disabled it.

Answer 1

Without using any JavaScript at all? I am afraid it is not possible, at least on the client side.

In HTML there are NOFRAME and NOSCRIPT tags, but no equivalent tag for images, whose contents would be displayed only if images were disabled or not supported.

Then for your A tags wrapping an image, maybe you could make the A tag, instead of its image, responsible for showing the tooltip and for handling events.

Also, to ensure that your layout will not break if the images do not load, you could give the A tag the normal height and width of its image. The same thing would also work for the <input type='image'> tags by wrapping them in a span tag and giving it correct attribute values.

For example:

<a href="..." style="height: 25px"; width: 80px;" title="Some tooltip text">
    <img...>
</a>

<span onclick="some action" style="height: 30px"; width: 70px;" title="Some other tooltip text">
    <input type='image'...>
</span>