alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Создание изображения в виде ссылки.

Категория: Уроки HTML Просмотров: 665 Коментариев: 0 Дата: 2017-06-07 Добавил: admin

 Тег iframe

В этом уроке мы вернемся к ссылкам, так как кроме абсолютных/относительных ссылок и якорных ссылок, есть еще один вид ссылок - это ссылки на изображении. Такую ссылку достаточно часто приходится создавать, когда нужно, при клике на картинку, переводить пользователя на другую страницу.

Поэтому мы рассмотрим не только одинарные ссылки, но и множественные.

Одинарные ссылки

Итак, начнем с одинарной ссылки и попробуем обычное изображение сделать ссылкой главную страницу сайта. Делается это очень просто, берем, для начала, обычную картинку, можно так же воспользоваться той картинкой, что использовали при уроке Как вставить изображение в HTML, и добавляем к ней обычную ссылку.

HTML
images

Теперь наша картинка стала ссылкой, при клике на которую у вас в новой вкладке откроется главная страница webteoretik.ru. Вокруг картинки может появляться рамка. Чтобы от нее избавится используется еще один атрибут - это border="0", который будет указывать браузеру, что рамку отображать не нужно не смотря но то, что картинка так и осталась ссылкой.

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

Множественные ссылки

Для начала, возьмем вот такую картинку.

 Множественные ссылки

Сохраняем ее в уже имеющуюся папку images. Сохранить картинку можно, нажав правый клик и выбрав пункт Сохранить изображение как. И затем выводить эту картинку на экран, указав имя данной картинки и атрибут usemap="#formTime", который говорит о том, что данная картинка будет использовать карту, у которой id="formTime".

HTML
images

Видим, что есть общее изображение которое состоит из двух элементов где левая часть зеленная должна вести на один сайт, а правая синяя часть на другой сайт. И нужно сделать так, чтобы ссылки были только на этих двух областях. Это делается с помощью, так называемой техники, image map , то есть на изображение накладывается невидимая карта, на которой выделяются определенные области, которые и будут перенаправлять пользователя по разным адресам.

Создается та самая карта с помощью тега <map>. Это парный тег и должен обязательно иметь закрывающийся тег </map>. Данной созданной карте требуется задать идентификатор id="forTime" и имя name="forTime".

С помощью тега <area>, внутри этой карты создаются области, которые будут по-разному реагировать при наведении мыши и соответственно переправлять пользователя на тот или иной сайт. Данному тегу обязательно нужно указать ряд атрибутов. Первый - это href=" https://webteoretik.ru" показывающая, куда будет вести данная область при клике. Второй атрибут - это shape="rect", задающий форму для нашей области. Для этого атрибута доступны три формы:

  • rect - Примоуголььник
  • circle - Круг
  • poly - Многоугольник (произвольная форма)

И последний, третий, самый важный атрибут, задающий координаты области - это coords="27,20,270,85". Как нам получить эти координаты? Так как форма у нас четырехугольная, то нужно задать четыре координаты нашей области. То есть мы от левого и от верхнего края картинки указываем отступ в px до начала нашей области и также отмеряем размер нужной области по высоте и ширине, т.е. до конца нужной области. Вот эти четыре координаты и нужно указать.

Определение области

Данные координаты можно определить «на глаз», что будет крайне не точно, или можно измерять специальной линейкой. Вот так мы создали одну область на картинке, точно также создается и вторая область на картинке с присвоением ей других координат.

HTML

images Переход на главную Остаться на этой же странице

Для определения координат области на картинке, можно также воспользоваться online генератором, который за вас создаст всю карту для ваших областей. Для этого заходим на этот сайт и в несколько шагов создадим нашу карту.

  • 1. Выбираем наше изображение.
  • 2. Загружаем изображение, на сервер, нажав на кнопку Upload.
  • 3. Нажимает кнопку accept.

Появляется, изначально нулевая область, где мы выбираем форму области (прямоугольник, круг, многоугольник), затем выделяем первую область, после чего в следующем поле появятся координаты, в поле href указываем куда будет ссылается наша область, задаем описание к этой области, и выбираем способ открывания страница в новом окне или в место первоначальной. Точно так же поступаем и следующей областью. Затем ниже нажимаем кнопочку code где появится сгенерированный код нашей карты.

Автоматическое определение области

Копируем сгенерированный код и вставляем нашу карту после изображения. Не забудьте в изображении изменить значение атрибута usemap на тот, что сгенерировался в идентификаторе. Если Вы все сделали верно, то должна появиться картинка, поделенная на две области каждая из которой будет вести на разные страницы.

В результате Вы должны были получить такую же картину как в Демо странице. Вот так с обычного изображения можно создавать ссылки на другие страницы. На этом мы завершим и перейдем к следующему уроку.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов