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

Очень удобно, когда зоной действия активной ссылки является не текст, а изображение. Язык разметки 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›

Оцените статью!