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

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

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

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

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

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

20-1_06

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

btn_preview

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

< a href=»http://www.my_site.com/files/file.zip» >Скачать файл < /a >

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

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

< a href=»http://www.my_site.com/files/file.zip»><img src=»http://www.my_ste.com/img/img.jpg» /></a>

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

201_063

Информационный партнер: www.freeoboi.ru — красивые обои для рабочего стола вашего компьютера. 25 рубрик. Много обоев. Очень…

О admin

2 комментария

  1. альберт

    КАК код тизера вставить на сайт wordpress&
    С ув. Альберт!

    • Также как и любой другой код. WordPress — это система управления контентом, которая практически ничем не отличается от десятка других CMS.

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

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

*