Приднестровская поддержка XOOPS
При создании ссылки на внешние ресурсы целесообразно использовать визуальные подсказки, дающие пользователю понять, что ссылка ведет на другой сайт. Это можно сделать с помощью CSS, не изменяя разметку самого документа.
Решение
Для оформления внешних ссылок можно использовать селектор CSS3, поддерживаемый многими современными браузерами. В следующем абзаце первая ссылка ведет на другую страницу того же сайта, а вторая – на другой веб-сайт (Google).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Глава 4 - Показать внешние ссылки</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="external_links1.css" />
</head>
<body>
<p>Перейти на страницу нашего, <a href="page2.html">сайта</a>. <br>
Перейти на страницу <a href="http://www.google.com">GOOGLE</a>.</p>
</body>
</html>
Для обращения к ссылке, начинающейся с http:, и добавления к ней пиктограммы можно использовать селектор, описанный в спецификации CSS3:
a[href ^="http:"] {
padding-left: 20px;
background-image: url(link_icon_external.gif);
background-repeat: no-repeat;
}
Рис. 4.17. Рядом со ссылкой, ведущей на другой сайт, отображается пиктограмма
Рядом со всеми ссылками, начинающимися с http: (они должны вести на внешние ресурсы, поскольку для ссылок, ведущих на другие страницы того же сайта не нужно вводить http:), будет показана пиктограмма в виде земного шара.
Обсуждение
Селекторы атрибутов CSS3 поддерживаются большинством современных браузеров (исключение составляет Internet Explorer 6). В остальных браузерах вид ссылки не изменится, поэтому можно считать этот эффект приятным дополнением для пользователей более новых браузеров.
Рассмотрим селектор атрибута a[href ^=”http:”] более подробно.
Атрибутом для данного селектора выбран href, и мы хотим, чтобы он ссылался на элементы, у которых значение данного атрибута начинается с http:. Оператор ^= означает «начинается с». С помощью похожего
селектора атрибута можно, к примеру, выбрать все ссылки на электронные адреса: a[href ^=”mailto:”].
Селекторы атрибутов удобно также использовать для анализа расширения файла, на который указывает ссылка. Например, анализируя расширение файла в тексте ссылки, можно добавить значок, указывающий на то, что это файл в формате PDF и т. п. Селектор a[href $=”.pdf”] указывает на все ссылки с расширением файла .pdf. Оператор $= означает «заканчивается на», поэтому данный селектор выбирает все элементы, значение атрибута href которых заканчивается на .pdf. Ниже представлен пример использования всех рассмотренных трех селекторов:
<ul class="links">
<li><a href="http://www.google.com">Поиск в GOOGLE</a></li>
<li><a href="/files/example.pdf">Скачать PDF файл</a></li>
<li><a href="mailto:info@example.com">Наша почта</a></li>
</ul>
a[href ^="http:"] {
padding-left: 20px;
background-image: url(link_icon_external.gif);
background-repeat: no-repeat;
}
a[href ^="mailto:"] {
padding-left: 20px;
background-image: url(link_icon_email.gif);
background-repeat: no-repeat;
}
a[href $=".pdf"] {
padding-left: 20px;
background-image: url(link_icon_pdf.gif);
background-repeat: no-repeat;
}
Рис. 4.18. Ссылки с пиктограммами, указывающими, что они ведут на внешний ресурс, на адрес электронной почты и файл pdf (DEMO)
Селекторы атрибутов полезно использовать в подобных ситуациях - для внесения привлекательных дополнений в дизайн вашей страницы.
Отправитель | Нити |
---|
6 пользователь(ей) активно (1 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 6 далее... |