Добавляем к ссылкам иконки.

3.05.2007 @ Рубрики: CSS  

Предположим у нас есть ссылкаlink.gif вида: <a href=”someurl.com” >. Ни что не запрещает нам добавить к ней атрибут icon со значением “out” <a href=”someurl.com” icon=”out”>, а потом описать его в стилях:

a[icon ^=”out”] {
padding-right: 20px;
background: transparent url(external.gif) no-repeat center right;
}

Ведь в описании селекторов четко говорится:
“шаблон E[foo~=”warning”]Сопоставляется любому элементу E, у которого значением атрибута “foo” является список значений, разделенных пробелами, и одно из этих значений в точности равно “warning”.”

Так же можно сделать и ссылку на почту:

<a href="mailto:info@kto-to.tam">Написать мне</a>

mailto.gif Написать мне

И по аналогии применяем к ссылке стиль вида:

a[href ^=”mailto:”] {
   padding-right: 20px;
   background: transparent url(icon_mail.gif) no-repeat center left;
}

Если мы хотим добавить иконки к ссылкам на файлы с определенным расширением, например  <a href=”files/file.pdf” >Скачать файл</a> Мы описываем его следующим образом:

a[href $=’.pdf’] {
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}

Тем самым говоря “Взять тэг <a>, атрибут href которого имеет значение заканчивающееся на .pdf и применить этот стиль”.

Скачать файл pdf.gif

Источник вдохновения и вольного перевода - статья Showing Hyperlink Cues with CSS.

Черно-белых комментариев: 10

  • Neutrino :

    3.05.2007 в 12:28

    По большому счету это все можно сделать и через классы mail, out, pdf и тд…

  • Delchyve :

    3.05.2007 в 15:03

    Ну результат будет тот же. Только писанины чуть-чуть поболее.

  • Neutrino :

    3.05.2007 в 15:05

    Ну почему больше? По-моему тоже самое :)

  • Delchyve :

    3.05.2007 в 15:18

    Ну смотри, при описании ссылок для мыла или для файлов (тех же pdf, doc и т.д.) в этом случае мы не указываем класс в самой ссылке. А если делаем через классы, то нам придеться писать
    <а class=”…” href=”…”>
    Вот. ;)

  • Neutrino :

    3.05.2007 в 15:20

    Ладно, согласен :)

  • Yuriy :

    3.05.2007 в 21:45

    надо только дописать что поддержка этих селекторов началась в IE c 7 версии

  • Delchyve :

    4.05.2007 в 09:16

    Да, спасибо за дополнение. IE как всегда нервно курит за углом.

  • бассейны :

    18.06.2007 в 18:03

    Для меня было полезно прочасть это. автору спасибо

  • g_i :

    27.11.2007 в 13:32

    скажите…
    а можно, чтобы вместо иконок отображало ФАВИКОНКУ того сайта на который ссылка?
    это для блогролла было бы просто супер..

  • Delchyve :

    27.11.2007 в 17:41

    Теоретически можно все. Вопрос в реализации. Пробуйте. Принцип описан. :)

Оставьте черный или белый комментарий :)

HTML: разрешено использование: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>