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

13

Posted by Виктория Павловна Дончик | Posted in О блоге | Posted on 01-03-2012

Метки: , , ,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Comments (13)

Спасибо за статью. Я буквально вчера намучился с картинками, но сделал. Вот бы мне рань ше вашу статью.
Благодарю

Очень интересная статья. Возьму в закладки. Спасибо.

Вполне полезный советик.

Очень интересная и познавательная, а главное полезная информация. Спасибо большое. Удачи Вам и творческого вдохновения.

Недавно столкнулась с такой задачей. Сделала 2-м способом, можно сказать наугад. Про первый способ было очень интересно почитать. Спасибо!

Спасибо, ставлю в закладки, вернусь, когда понадобится сделать картинку ссылкой.

Очень интересная и полезная информация,всегда пригодится Спасибо большое, успехов вам

Разместила свою статью в белом каталоге, а вот картинку к статье так и не удалось загрузить! Может теперь получиться – попробую!

Замечательный урок! Давно хотел научиться делать картинку ссылкой. Спасибо!

Как сделать картинку ссылкой – это очень актуальная тема для новичков.
У Вас замечательно получилось раскрыть тему.

Спасибо.

Толковая и очень нужная информация. Благодарю.

Скоро я доберусь и до таких дел, поэтому ваши статьи, Виктория, будут в помощь. Сделать картинку ссылкой – это очень нужно бывает, спасибо за эту полезную информацию о информатике.

Write a comment