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

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

Инструкция

  • Используя любой графический редактор, уменьшите изображение. Его размер по любой из координат не должен превышать 200 пикселей. Лучше, если картинка будет иметь горизонтальную компоновку.
    Это может быть, например, виртуальная кнопка, надпись на которой выполнена художественным шрифтом. Формат изображения должен быть одним из следующих: JPG, PNG, GIF. Первый из них предпочтительнее для фотографий, а оставшиеся два - для штриховых рисунков (так обеспечивается наилучшее сжатие). Результат изменения обязательно сохраните под новым именем, чтобы не испортить оригинал.
  • Загрузите файл с картинкой на сервер в папку, в которой расположен HTML-файл. Для осуществления такой загрузки можно использовать веб-интерфейс (при его наличии у хостинг-провайдера) либо любую программу-клиент протокола FTP.
  • В желаемое место HTML-файла поместите фрагмент кода следующего содержания: , где выражение после оператора "href=" - адрес, на который ведет ссылка, а someimage.gif - имя и расширение файла с изображением.
  • У некоторых пользователей показ изображений в браузере отключен. Поэтому целесообразно разместить прямо под картинкой пояснение о том, куда ведет ссылка. В этом случае переделайте приведенный выше фрагмент кода следующим образом:
  • Макрофотографии насекомых. Поясняющий текст будет располагаться под изображением. Нажатие на него также приведет к переходу по ссылке.

  • Загрузив на сервер обновленную версию HTML-файла, откройте в браузере соответствующую страницу, после чего убедитесь, что изображение отображается, а ссылка действует. Переход по ней должен происходить при нажатии как на изображение, так и на расположенную под ним поясняющую надпись (при ее наличии).
  • Оцените статью!