1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

Изображение для ссылок

Главные вкладки

Аватар пользователя MarvinGot MarvinGot 9 августа 2012 в 14:35

Для ссылок на сайте использую модуль link.
В материале есть 4 ссылки на разные файлообменники. Но через link можно вывесты ссылки только в текстовом формате.
Как сделать так чтобы каждой отдельной ссылке была постоянно присвоена отдельная картинка (лого файлообменника)?

Комментарии

Аватар пользователя MarvinGot MarvinGot 9 августа 2012 в 15:25

Kvark Я искал как можно подобное реализовать с помощью css, но не нашел ничего.
Если Вы знаете возможные варианты решения, то подскажите.
Но умничать и строить гения из себя попрошу воздержаться.

Аватар пользователя Kvark Kvark 9 августа 2012 в 16:12

Если вы не там искали или не нашли это еще не значит что остальные гении Smile
Ваша задача банальна: при использовании сигнатуры заданного типа вывести рядом картинку. CSS с этой задачей справляется запросто!
Настоятельно рекомендую к прочтению: http://htmlbook.ru/samcss
Если лень читать тут уж никто не поможет Smile

И чисто чтоб еще раз построить из себя гения вам реализация того что вы спрашиваете без углубления в технические детали:

<style type="text/css">
.ShowMePicture {width: 100px;}
{
.b1 {list-style-image: url(1.png); }/* Rapidshare */
.b2 {list-style-image: url(2.png); }/* Webshare */
.b3 {list-style-image: url(3.png); }/* CoolShare */
.b4 {list-style-image: url(4.png); }/* HrenaShare */
}
</style>

<div class="ShowMePicture">
  <ul>
    <li><div class="b1">link1</div></li>
    <li><div class="b2">link2</div></li>
    <li><div class="b3">link3</div></li>
    <li><div class="b4">link4</div></li>
  </ul>
</div>

На работоспособность код не проверял, но идею надеюсь поняли...

Аватар пользователя Anonym_tsk Anonym_tsk 9 августа 2012 в 19:41

Самый простой вариант - пара строчек на JS.
Что-то типа

$('a[href^="https://rapidshare.com/"]').addClass('rapidshare');
.rapidshare {
  background: url('rapidshare.png') no-repeat left;
}

А для новых браузеров можно еще проще и без JS:

a[href^="https://rapidshare.com/"] {
  background: url('rapidshare.png') no-repeat left;
}
Аватар пользователя MarvinGot MarvinGot 9 августа 2012 в 23:09

Kvark
Большое спасибо, возможно по поводу гения я слегка неправильно выразился. Приношу свои извинения.
А за ссылку отдельное спасибо.

Аватар пользователя Anonym_tsk Anonym_tsk 10 августа 2012 в 6:22

"MarvinGot" wrote:
возможно по поводу гения я слегка неправильно выразился

Если только слегка. Его решение неверно. Свойство list-style-image нельзя применять к элементу div. Оно применяется только:
К тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Аватар пользователя Kvark Kvark 10 августа 2012 в 7:58

Да с точки зрения правильности синтаксиса может и нет, я же еще не гуру Smile но я делал такой вариант и у меня вместо точек в списке показывало именно мою картинку, тут в примере пытался импровизировать, и передать идею, а не готовое решение. Если див вынести за ли - будет работать?

Аватар пользователя Anonym_tsk Anonym_tsk 10 августа 2012 в 8:14

"Kvark" wrote:
Если див вынести за ли - будет работать?

Да работать то оно может и будет, только нельзя list-style-image диву применять.

Аватар пользователя Kvark Kvark 10 августа 2012 в 8:36

идея была в том чтобы не к див применить, а к li - чтобы вместо стандартных точек показывало значки сервисов.

Аватар пользователя iNFerNo iNFerNo 26 ноября 2012 в 10:43

а если к полю ник ссылка на картику (вконтакте) как вывести в ноде и во вьюхе эту картинку??? если какие нить форматеры для картинок по ссылке