Как добавить ссылку к изображению?

2 ноября 2014 г. Просмотров: 421 Инструкции
Очень удобно, когда зоной действия активной ссылки является не текст, а изображение. Язык разметки HTML вполне позволяет осуществить такую операцию. Все, что для этого необходимо - особым образом скомбинировать теги.
Создать сайт самостоятельно с Wix.com

Инструкция

  • Если все файлы на сервере хранятся в одной папке, то пропишите следующий HTML-код страницы:‹a href=страница.html›Нажатие на эту ссылку приведет вас на другую страницу в пределах сайта‹/a›
  • Ознакомьтесь с тем, как вставлять в HTML-код ссылки на локальные страницы, расположенные на сторонних сайтах:‹a href=http://сервер.домен/папка/страница.html›Нажатие на эту ссылку приведет вас страницу, расположенную на совершенно другом сайте‹/a›
  • Теперь ознакомьтесь со способом вставки в страницу изображений, хранящихся на том же сервере, что и сайт, при условии, что все файлы на этом сервере хранятся в общей папке:‹img src=имяфайла.jpg›
  • Аналогичным образом вставляйте в страницу и изображения, хранящиеся на сторонних серверах:‹img src=http://сервер.домен/папка/имяфайла.jpg›Но при этом помните, что некоторые серверы не позволяют вставлять изображения в страницы, расположенные за их пределами, показывая вместо них предупредительные заставки либо не показывая ничего.
    Не копируйте в таких случаях картинку на локальный сервер - это будет нарушением авторского права. Лучше дайте на эту картинку ссылку.
  • Чтобы при нажатии на картинку происходил переход по ссылке, скомбинируйте эти теги следующим образом:‹a href=http://сервер.домен/папка/страница.html›‹img src=картинка.jpg›‹/a›При желании, замените в этой конструкции глобальную ссылку на страницу на локальную, либо, наоборот, локальную ссылку на изображение на глобальную.
  • Наконец, если вы желаете, чтобы переход по ссылке происходил при нажатии как на картинку, так и на расположенный под ней текст, используйте более сложную конструкцию следующего вида:‹a href=http://сервер.домен/папка/страница.html›‹img src=картинка.jpg›‹p›Вы перейдете на другую страницу независимо от того, нажмете ли вы на этот текст, либо на расположенную над ним картинку. Результат окажется совершенно одинаковым.‹/a›
  • Оцените статью!