Главная - Без рубрики - Как заменить текст ссылки картинкой?

Как заменить текст ссылки картинкой?

Попросили написать об этом. Тот, кто это знает, может не читать и смотреть другие публикации. Когда-то я тоже это не знал и искал – где бы почитать? 🙂

Не люблю читать толстые книги. Потому что люблю знать только то, что мне необходимо. А в толстых книгах много “мусора”, который неизвестно, понадобится когда-нибудь или нет.

Поэтому, не советую учить, точнее, заучивать книги по программированию на PHP и HTML – коду. Когда что-т надо – просто ищите инфу и читайте. Хорошо, когда с примерами (картинками, текстом), тогда можно повторить шаг за шагом и знания придут. Так люблю делать я, так пишу для вас.

Сегодня расскажу, как вместо текстовой ссылки подставить картинку. Например, вы предлагаете для скачивания с своего сайта какие-нибудь файлы (архивы, или что еще). Вы хотите украсить ссылку на скачивание симпатичной картинкой, например, такой:

20-1_06

Не могу сказать, что она очень симпатичная :), взял первую какая попалась под руку.  Есть много вариантов картинок, которые предназначены для замены текстовой ссылки. Например, вот такая:

btn_preview

Эта картинка подошла бы для ссылки Предпросмотра. Ладно, о картинках хватит. Давайте о главном. Как выглядит ссылка? Например, ссылка для скачивания файла. Её конструкция такая:

<a href=»http://site.ru/»>Скачать файл</a>

Слова — Скачать файл — и есть тот текст, который станет в этом html-коде ссылкой для скачивания нашего файла — file.zip.
Тег < a > — самый важный элемент HTML и предназначен для создания ссылок (любых). Если мы используем картинку, значит, нам надо использовать тег <img> вместе с тегом <a>. Таким образом, основным тегом является тег < a > (создающий ссылку), а вторым, вложенным в него, является тег < img >, создающий ссылку с помощью картинки. В теге < img > обязательно присутствует параметр crs, который показывает место, где лежит наш графический файл. Тег < a > обязательно имеет закрывающийся тег с обратным слешем < / a >. Тег < img > закрывающегося тега не имеет.

Как все это будет выглядеть? Смотрим, сложного ничего нет:

< a href="http://site.ru/">< img src="http://www.bestwordpress.org.ua/wp-content/uploads/2010/04/201_06.gif" alt="download" height="53" /></a>

Видите, что тег < img > вложен в тег < а >? Если не поняли, читайте и смотрите сначала 🙂
Или просто скопируйте и замените на свои ссылки. С учетом — где лежит ваш архивный файл и где лежит ваша картинка для отображения ссылки.  Важно: между символом < и буквами не должно быть пробела, когда пишите код. Просто в тексте вынужден делать пробел, иначе Вордпресс начнет все исправлять по-своему 🙂


download

Информационный партнер: netpeak.ua — раскрутка сайта. Они помогут вам сделать ваш сайт посещаемым. Готовы выполнить полный аудит и дать дельные советы. Доверяйте профессионалам. Зайдите и почитайте. Сделайте правильный выбор.

О admin

1 комментарий

  1. Владислав

    Добрый день.Это самый простой способ.Для каждой статьи каждый раз создавать ссылку. Можно сделать это через произвольные поля.Тогда при написании статьи нужно просто выбрать «Download» в произвольном поле и всё. Вот этот способ и не получается. Прошёл раза три по кругу и результат ноль.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*