Стилизация недоступных ссылок на картинки
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:Code (HTML) : Убрать нумерацию
- <style type="text/css">
- img:before {
- content: "Извините, изображение " attr(alt) " недоступно";
- color: #FF0000;
- display: block;
- margin-bottom: 5px;
- }
- img:after {
- content: "Источник: " attr(src);
- color: #0000FF;
- display: block;
- margin-top: 5px;
- }
- </style>
Теперь что касается поддержки браузерами. Браузеры на движке Mozilla, в том числе и мобильные, категорически отказываются показывать содержимое псевдо-элемента :before, но при этом нормально показывают текст из :after. Старая Opera 9, браузеры на движке WebKit (Chrome) а также мобильные браузеры Maxthon и Chrome под Android без проблем отобразили обе надписи. Safari 5 и IE не показали вообще ничего. Таким образом, использовать на практике этот трюк надо с осторожностью из-за недостаточной кроссбраузерности, но узнать о нем, на мой взгляд, будет интересно. Рабочий пример вы можете посмотреть на демонстрационной странице.
Просмотров: 1336 | Комментариев: 2
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
ManHunter
(27.11.2019 в 23:04):
Для более оперативного реагирования. К тому же на источнике, например, может стоять проверка реферов и на чужой сайт будет отдаваться 404/403, хотя по прямой ссылке картинка будет доступна.
Ellephant
(27.11.2019 в 22:57):
а зачем писать ссылку на картинку, если все равно она по этой ссылке не доступна?
Добавить комментарий
Заполните форму для добавления комментария