Стилизация недоступных ссылок на картинки

Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:Над "битой" картинкой будет уведомление, что она недоступна, и показано название картинки из атрибута alt. А под картинкой будет указана ссылка, по которой она должна находиться.

Теперь что касается поддержки браузерами. Браузеры на движке Mozilla, в том числе и мобильные, категорически отказываются показывать содержимое псевдо-элемента :before, но при этом нормально показывают текст из :after. Старая Opera 9, браузеры на движке WebKit (Chrome) а также мобильные браузеры Maxthon и Chrome под Android без проблем отобразили обе надписи. Safari 5 и IE не показали вообще ничего. Таким образом, использовать на практике этот трюк надо с осторожностью из-за недостаточной кроссбраузерности, но узнать о нем, на мой взгляд, будет интересно. Рабочий пример вы можете посмотреть на демонстрационной странице.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.