Пример вывода фонового изображения для внешних ссылок с сайта | КОНЬЯКОВ.ру

UDP1: В исходном коде смотрите также CSS код иконок для ссылок mailto, и файлов: pdf, rtf, .doc, .docx, xls, xlsx, ppt, pptx

UDP2: Иконки для CSS кода ищите в Интернете сами :)

Исходный код примера:

<!DOCTYPE html>

<html>
<head>
<title>Пример вывода фонового изображения для внешних ссылок с сайта | КОНЬЯКОВ.ру</title>
<meta charset="utf-8"/>
<style type="text/css">
a[href ^="http:"] {
padding:0 20px;
background-image:url(http://konyakov.ru/wp-content/uploads/2012/02/action.gif);
background-repeat:no-repeat;
}
a[href ^="http://www.konyakov"] {
padding:0;
background-image:none;
}
a[href ^="http://konyakov"] {
padding:0;
background-image:none;
}


a[href ^="mailto:"] {
padding:0 20px;
background-image:url(icon_email.gif);
background-repeat:no-repeat;
}
a[href $=".pdf"] {
padding:0 20px;
background-image:url(icon_pdf.gif);
background-repeat:no-repeat;
}
a[href $=".rtf"] {
padding:0 20px;
background-image:url(icon_rtf.gif);
background-repeat:no-repeat;
}
a[href $=".doc"] {
padding:0 20px;
background-image:url(icon_doc.gif);
background-repeat:no-repeat;
}
a[href $=".docx"] {
padding:0 20px;
background-image:url(icon_docx.gif);
background-repeat:no-repeat;
}
a[href $=".xls"] {
padding:0 20px;
background-image:url(icon_xls.gif);
background-repeat:no-repeat;
}
a[href $=".xlsx"] {
padding:0 20px;
background-image:url(icon_xlsx.gif);
background-repeat:no-repeat;
}
a[href $=".ppt"] {
padding:0 20px;
background-image:url(icon_ppt.gif);
background-repeat:no-repeat;
}
a[href $=".pptx"] {
padding:0 20px;
background-image:url(icon_pptx.gif);
background-repeat:no-repeat;
}
</style>
</head>

<body>

<p><a href="/pubs/" target="_blank">Относительная ссылка на сайте КОНЬЯКОВ.ру</a></p>
<p><a href="http://konyakov.ru/pubs/" target="_blank">Ссылка на сайт КОНЬЯКОВ.ру (без www)</a></p>
<p><a href="http://www.konyakov.ru/pubs/" target="_blank">Ссылка на сайт КОНЬЯКОВ.ру (с www)</a></p>
<noindex><p><a href="http://www.yandex.ru/" rel="nofollow" target="_blank">Ссылка ведущая на внешний сайт</a></p>
<p><a href="http://www.rambler.ru/" rel="nofollow" target="_blank">Ссылка ведущая на Рамблер</a></p></noindex>

</body>
</html>