InformatikUrok

Как сделать картинку ссылкой в wordpress?

Сегодня мы поговорим о том, как сделать картинку ссылкой, т.е. всю область картинки сделаем кликабельной. Сделаем картинку ссылкой на главную страницу сайта. Для этого применим тег гиперссылки <a>, рассмотрим некоторые атрибуты тега <img> (тег вставки картинки), научимся правильно настраивать окно  Добавить медиафайл.

Итак, чтобы картинку сделать ссылкой, нужно разместить тег <img атрибуты>  внутри тега <a атрибуты> </a>. Выглядеть html-код страницы будет так:

• <a href=адрес страницы><img src=адрес картинки атрибуты></a>

Давайте создадим картинку, при щелчке на которую нужно попасть на главную страницу нашего блога. Что для этого нужно? Для этого в атрибуте href вместо слов "адрес страницы" прописываем адрес главной страницы сайта вот так:

• <a href= /><img src=адрес картинки  атрибуты></a>

Как я писала раньше отображение картинки в браузере сильно зависит от версии и вида браузера. В IE, например, созданные так картинки будут отображаться  вокруг с рамкой, шириной 3 пикселя и с цветом, совпадающим с цветом ссылок. Хоть такой эффект рамок наблюдается не во всех браузерах, все же давайте в html-код добавим атрибут border=0. Вот как это будет выглядеть

• <a href= /><img border=0 src=адрес картинки  атрибуты></a>

Это простой способ, чтобы сделать картинку ссылкой. Есть более сложный - разбить картинку на области прямоугольной или овальной формы, где каждая область - ссылка на какую-то страницу. Но об этом поговорим в другом посте.

Хочу еще поговорить об атрибутах в теге img. Чтобы с картинкой было удобно работать, можно к картинке сделать "примечание", это когда наводите курсор мыши на картинку и появляется текст-подсказка. Для этого рекомендуется использовать тег title=текст. Вот как это будет выглядеть html-код страницы:

• <a href= /><img border=0 src=адрес картинки  атрибуты title="Перейти на главную страницу блога /"></a>

Обратите внимание, что если картинка загружается, то будет подсказка из атрибута title, а если нет - то будет записан вместо картинки текст из атрибута alt.

Вы можете сказать, что очень много атрибутов и html-кодов должен знать блогер для создания страниц. Ответов два -  да и нет. Да, чтобы уметь прочесть и подправить уже созданный WordPress html-код. Нет, потому что можно правильно заполнять поля окошка Добавить медиафайл:

Вот и сама картинку, которая является ссылкой на главную страницу сайта.

Главная страница сайта откроется в этом жек окне, если нужно открыть в другом окне, то воспользуйтесь рекомендациями статьи Как открыть ссылку в новом окне.

Сегодня мы узнали:

• как сделать картинку ссылкой (кликабельной);
• как сделать комментарий-подсказку к картинке;
• как правильно настроить окно Добавить медиафайл.