Кликабельная иконка возле ссылки

[splean]

Хотелось бы узнать как ПРАВИЛЬНО делать это.

Т.е. нужно чтобы конечный пользователь просто писал ссылку, а в документе она появлялась с иконкой, причем на иконку также можно было бы нажимать, подчеркивание было бы только у текста ссылки.

Как делать?

Методом тыка добрался до вот такого, не ругайте сильно)

<a class="savelink" href="#"><div class="save_xl">ССЫЛКА</div></a>

.savelink {
	display: inline;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	margin-left: 20px;
		text-decoration: underline;
}

.save_xl {
	background: url("icon_excel.jpg") no-repeat;
}

.save_word {
	background: url("icon_word.jpg") no-repeat;
}

.save_file {
	background: url("icon_file.jpg") no-repeat;
}

В ие6 выглядит почти так, как надо, но хочется же чтобы это дело можно было вставлять в текст, а этот вариант текст переносит на следующую строку.

[Searcher]

естественно будет переносить, ведь div - блочный элемент. Вместо <div class="save_xl">ССЫЛКА</div> используйте <span class="save_xl">ССЫЛКА</span>

[splean]

Тогда придется в каждый из классов .save_... дописывать паддинги для отступа, так ведь?

Вот как на википедии, в конце список сайтов\документов, вот мне хочется сделать также.

А вообще у них это сделано одной только ссылкой с одним классом как я понимаю, картинка то как рисуется? В зависимости от расширения? Я пожалуй обойдусь без таких ухищрений)

В целом что во что должно быть вложено? span в a или наоборот?

[Searcher]

да там все просто, вот часть CSS самой википедии:

#bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
#bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
#bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
#bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
#bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
#bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
.link-audio {
	background: url("audio.png") center right no-repeat;
	padding-right: 13px;
}
#bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
#bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
#bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
#bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
.link-video {
	background: url("video.png") center right no-repeat;
	padding-right: 13px;
}
#bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
#bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
#bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
.link-document {
	background: url("document.png") center right no-repeat;
	padding-right: 12px;
}

фрагмент [href $=.pdf] называется CSS - селектор, который срабатывает при соответствии значения описанного параметра в тэге этого класса с шаблоном. Там правила простые, погуглите.

CSS - селекторы не понимает IE до 7 версии помоему...

span в a или наоборот зависит от вашей задачи, но в вашей ситуации span не нужен

[MoLoToK]

Да, в IE шестой версии это не работает.

Я вроде как нашёл кроссбраузерное решение этой задачи: Пиктограммы на ссылках © ZUGA. То есть, это делается через class.

Единственное, что меня насторожило (что мне до сих пор не ясно и я прошу Вас мне это разъяснить) — у него (ZUGA) в его CSS (не в той, что он показывает в своём примере, а непосредственно в той, что используется у него самого) у каждой ссылки с hover после 0% впритык подписано !important. Я себе сделал именно так, как сделано непосредственно в его CSS.

Вот код:

a.out {
background : url(images/out.gif) no-repeat 100% 0%;
padding-right : 9px;
}

a.out:hover {
background : url(images/out_h.gif) no-repeat 100% 0%!important;
}

a.out:visited {
background : url(images/out_v.gif) no-repeat 100% 0%;
}

a.magnet {
background : url(images/magnet.gif) no-repeat 0 100%;
padding-left : 20px;
}

У ссылок с class="out" будет по три изображения: не посещённая ссылка, ссылка с наведённым на неё указателем, посещённая ссылка. Пиктограмма у этих ссылок будет располагаться справа, число пикселей (в приведённом мною коде это 9px) укажите равным ширине изображения Вашей пиктограммы.

А ссылка с class="magnet" в общем аналогична, только пиктограмма у неё будет располагаться не справа, а слева. И в приведённом мною примере у неё лишь одно изображение (без hover и visited).

Помимо того вопроса насчёт !important...

Как думаете, хорошо ли я подобрал названия для classов ссылок?

• out — любой другой сайт (кроме Википедии);
  
• wiki — Википедия;
  
• magnet — магнет-ссылка.
  

Просто нужно изначально со всем этим определиться, чтобы потом в случае чего не пришлось всё перекраивать (заменять у каждой ссылки class).

Насчёт Википедии сомнений нет.

Что думаете насчёт out? Не могу придумать другого добротного аналога. Сойдёт же? Или обозвать blank?

Большие сомнения у меня по поводу magnet. А именно: можно ведь сделать или magnet, или dc. Хотелось бы услышать Ваши доводы за и против той или иной записи.

P.S.: Да, к созданию сайтов нужно подходить дотошно, учитывая каждую мелочь.

Edited January 22, 2009 by MoLoToK