Blog. Just Blog

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

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:
  1. <style type="text/css">
  2. img:before {
  3.     content"Извините, изображение " attr(alt" недоступно";
  4.     color#FF0000;
  5.     displayblock;
  6.     margin-bottom5px;
  7. }
  8.  
  9. img:after {
  10.     content"Источник: " attr(src);
  11.     color#0000FF;
  12.     displayblock;
  13.     margin-top5px;
  14. }
  15. </style>
Над "битой" картинкой будет уведомление, что она недоступна, и показано название картинки из атрибута alt. А под картинкой будет указана ссылка, по которой она должна находиться.

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

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 268 | Комментариев: 2

Комментарии

Отзывы посетителей сайта о статье
ManHunter (27.11.2019 в 23:04):
Для более оперативного реагирования. К тому же на источнике, например, может стоять проверка реферов и на чужой сайт будет отдаваться 404/403, хотя по прямой ссылке картинка будет доступна.
Ellephant (27.11.2019 в 22:57):
а зачем писать ссылку на картинку, если все равно она по этой ссылке не доступна?

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2019
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0044 сек.) / Память: 4.75 Mb
Наверх