| 01 |
Перед каждым человеком, занимающимся веб-дизайном рано или поздно встает задача определить стиль ссылки в зависимости от самой ссылки. Самым ярким примером такой задачи могут служить внешние ссылки. Внешние ссылки — это ссылки, которые при нажатии на них отправят пользователя на другой ресурс (который, вероятно, откроется в новом окне). Другим примером может послужить список ссылок «Что почитать», который есть внизу практически каждой моей статьи. Здесь была реализована визуальная идентификация ссылки, в случае указания её на распространенный ресурс. Итак, как же это делается? В подавляющем большинстве случаев это реализуется при помощи css-селекторов: |
|
| 02 | CSS |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 a[href^='http'][href*='google.ru/'] {
/*[href^='http'] - выбрать ссылки a с атрибутом href со значением начинающимся с 'http'*/
/*[href*='google.ru/'] - выбрать ссылки a с атрибутом href со значением содержащим 'google.ru/'*/
background: url('google.png') no-repeat left center;
padding-left:20px;
}
a[href^='http'][href*='wikipedia.org/'] {
background: url('wiki.png') no-repeat left center;
padding-left:20px;
}
a[href^='http'][href*='microsoft.com/'] {
background: url('microsoft.png') no-repeat left center;
padding-left:20px;
} |
|
| 03 |
Где google.png, wiki.png, microsoft.png — изображения размером 16×16, созданные из иконок соответствующих сайтов (о том как установить иконку на свой сайт, можно почитать в статье). Теперь следующий код: |
|
| 04 | HTML |
1 2 3 < >Google.ru</></>
< >Wikipedia.org</></>
< >Microsoft.com</></> |
|
| 05 |
будет выглядеть так: |
|
| 07 |
Таким же образом можно оформить ссылки, например, на файлы: |
|
| 08 | CSS |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 a.file {padding: 0 0 0 22px;
background: url(images/files/unknowntype.png) no-repeat left 100%;}
a.file[href$='.doc'], a.file[href$='.docx'],
a.file[filename$='.doc'], a.file[filename$='.docx'] {
background: url(images/files/doc.png) no-repeat left 100%;
}
a.file[href$='.xls'], a.file[href$='.xlsx'],
a.file[filename$='.xls'], a.file[filename$='.xlsx'] {
background: url(images/files/xls.png) no-repeat left 100%;
}
a.file[href$='.pdf'],
a.file[filename$='.pdf'] {
background: url(images/files/pdf.png) no-repeat left 100%;
}
a.file[href$='.txt'],
a.file[filename$='.txt'] {
background: url(images/files/txt.png) no-repeat left 100%;
}
a.file[href$='.jpg'],
a.file[filename$='.jpg'] {
background: url(images/files/jpg.png) no-repeat left 100%;
}
a.file[href$='.zip'], a.file[href$='.rar'], a.file[href$='.gzip'],
a.file[filename$='.zip'], a.file[filename$='.rar'], a.file[filename$='.gzip'] {
background: url(images/files/zip.png) no-repeat left 100%;
}
a.file[href$='.mp3'], a.file[href$='.wav'], a.file[href$='.aac'],
a.file[filename$='.mp3'], a.file[filename$='.wav'] a.file[filename$='.aac'] {
background: url(images/files/music.png) no-repeat left 100%;
}
a.file[href$='.avi'], a.file[href$='.mkv'], a.file[href$='.mp4'],
a.file[filename$='.avi'], a.file[filename$='.mkv'] a.file[filename$='.mp4'] {
background: url(images/files/movie.png) no-repeat left 100%;
}
/* Фрагмент отвечающий за список файлов
ul.files {margin:0; color:#8D8D8D;}
ul.files span.filesize {margin-left:0.3em}
ul.files li {
font-size:.875em;
margin-bottom:0.4em;
position:relative;}
ul.files > li::before {content:'';}
ul.files > li{text-indent: -22px;}
ul.files li div.lock {
position:absolute;
width:8px;
height:9px;
left:-12px;
top:10px;
background:url(images/files/lock_small.png) no-repeat;
}
*/ |
|
| 09 |
Если вы обратили внимание, то распознавание проходит не только по окончанию значения атрибута href, но и по окончанию атрибута filename. Это сделано на тот случай, если ссылка на файл задана не явно и выглядит примерно как http://www.codius.ru/files/58a259bf-e698-4faf-8a0c-70fa5eb55286 — в этом случае программно задается атрибут filename, значение которого содержит реальное имя файла (например, image1.png), исходя из значения которого и применяется форматирование. Теперь данный код: |
|
| 10 | HTML |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 < >
<>< >Руководство по эксплуатации двигателей</>
< ><>(PDF, 3.4 Мб)</></></>
<>< >Письмо Минсельхоза РФ о регистрации техники</>
< ><>(PDF, 294 Кб)</></>
< ></></>
<>< >Письмо о регистрации в органах гостехнадзора</>
< ><>(JPG, 254 Кб)</></>
< ></></>
<>< >Инструкция по монтажу, пуску, регулированию и обкатке изделия</>
< ><>(AVI, 2.9 Мб)</></></>
<>< >Каталог деталей и сборочных единиц</>
< ><>(RAR, 39.3 Мб)</></></>
<>< >Фрагмент музыкальной композиции Fly</>
< ><>(MP3, 4.6 Мб)</></></>
</> |
|
| 11 |
Будет выглядеть так: |
|
| 12 |
|
|
| 13 |
Обратите внимание на второй и третий файлы в списке — на иконке висит замочек. Таким образом можно показать, что доступ к данному файлу запрещен. При клике на такую ссылку (можете попробовать кликнуть на ссылки с замочком) будет выполнена функция getaccess();, в которой можно запрограммировать какое-либо специфичное действие, например, показать инструкцию о том, как этот доступ получить: |
|
| 14 | JavaScript |
1 2 3 4 5 <script>
function getaccess() {
alert('для получения доступа к файлу необходимо зарегистрироваться!');
}
</script> |
|
| 15 |
И в завершение — ссылки на внешние источники: |
|
| 16 | CSS |
1 2 3 4 a[href^='http'] {
background: url('outersource.png') no-repeat right center;
padding-right:16px;
} |
|
| 17 |
Результат работы чуть ниже — в разделе Что почитать. |
|
| 18 |
Вы уже наверняка догадались, что поскольку все приведенные в данной статье приемы используют свойство background, вы не сможете использовать комбинацию этих приемов. |
|
| 19 |
P.S.: А что же с кроссбраузерной совместимостью, спросите вы? Как же на все это отреагируют IE версий 7, 6 и ранее?... Да в ж...пу их! Извините не удержался.
|
|
| 21 |
Похожие запросы:
|
|