Оглавление

Выделение ссылок, ведущих на внешний сайт

При создании ссылки на внешние ресурсы целесообразно использовать визуальные подсказки, дающие пользователю понять, что ссылка ведет на другой сайт. Это можно сделать с помощью 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)

 

Селекторы атрибутов полезно использовать в подобных ситуациях  - для внесения привлекательных дополнений в дизайн вашей страницы.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити