Картинка рядом со ссылкой как на WikiPedia
В данной статье рассказано, каким образом отображать автоматически рядом с ссылкой в статье любую картинку, как это сделано на WikiPedia.org (блоки в конце любой статьи).
Для реализации задуманного понадобится небольшая правка файла стилей. В зависимости от движка сайта, место редактирования будет отличаться.
Прежде всего покажу что примерно мы будем делать, если еще не поняли:
В блоке Примечание стрелки в конце ссылки. Сделаем аналогичное.
Подобные "украшательства" позволят привлечь внимание посетителя странички к нужным ссылкам по сайту, что позволяет улучшить "Поведенческий фактор" сайта в целом.
Как сделать ссылки со стрелками
Для начала сделаем заготовку подобной стрелки-картинки и закидываем нужного размера на хостинг. Размер примерно 16*16px. Если лень искать - качайте эту 
.
Далее необходимо определиться: ставить подобную стрелку будем по всему сайту, т.е. на каждой ссылке, или только на определенном блоке статьи. В любом случае понадобится определиться с названием класса куда будем подставлять нужный параметр CSS (об этом ниже).
Теперь предлагаю посмотреть видео-подкаст, в котором рассказано как определить имя класс стилей. Видео записано для другой статьи, но принцип тот же:
Скачать FireBug для своего браузера можно на официальной странице getfirebug.com.
Определились с именем класса и делаем вставку в файл стилей, который имеет расширение .css
.postssylka p a {
background: url("images/external.png") no-repeat scroll right center transparent;
padding: 0 20px 0 0;}Настройки CSS проведены так, что если в теле статьи идет ссылка, то со смещением направо проставляется картинка external.png. Атрибуту background задано соответственно: путь до картинки, нет повтора, прокрутка вместе с фоном, выравнивание направо по центру и с прозрачным фоном. Не обязательно выставлять все эти параметры и в такой последовательности. Все зависит от дизайна сайта и ваших пожеланий.
Подробнее об атрибуте background читайте в качественном справочнике http://htmlbook.ru/css/background. Обратите внимание, что слева в справочнике еть другие пункты по теме.
Параметр padding сделал нужный отступ стрелки-картинки от текста: верх справа снизу слева. Сделать это нужно обязательно, т.к. картинка у нас идет задним фоном.
Пробуйте. Экспериментируйте. Если сразу не получилось, то могли напутать с названием класса, либо иерархией. Долгое время на данном сайте стояла подобная картинка, поэтому все работает. Я снял, т.к. сайт меняет понемногу дизайн на кардинально новый.
