В этом уроке мы вернемся к ссылкам, так как кроме абсолютных/относительных ссылок и якорных ссылок, есть еще один вид ссылок - это ссылки на изображении. Такую ссылку достаточно часто приходится создавать, когда нужно, при клике на картинку, переводить пользователя на другую страницу.
Поэтому мы рассмотрим не только одинарные ссылки, но и множественные.
Одинарные ссылки
Итак, начнем с одинарной ссылки и попробуем обычное изображение сделать ссылкой главную страницу сайта. Делается это очень просто, берем, для начала, обычную картинку, можно так же воспользоваться той картинкой, что использовали при уроке Как вставить изображение в HTML, и добавляем к ней обычную ссылку.
Теперь наша картинка стала ссылкой, при клике на которую у вас в новой вкладке откроется главная страница webteoretik.ru. Вокруг картинки может появляться рамка. Чтобы от нее избавится используется еще один атрибут - это border="0", который будет указывать браузеру, что рамку отображать не нужно не смотря но то, что картинка так и осталась ссылкой.
Как и говорил все очень просто. Но бывают ситуации, когда нужно чтобы картинка была поделена на области и при клике на одну область мы перенаправлялись на один сайт, а при клике на другую область перенаправлялись на другой сайт. Тут и используются множественные ссылки.
Множественные ссылки
Для начала, возьмем вот такую картинку.
Сохраняем ее в уже имеющуюся папку images. Сохранить картинку можно, нажав правый клик и выбрав пункт Сохранить изображение как. И затем выводить эту картинку на экран, указав имя данной картинки и атрибут usemap="#formTime", который говорит о том, что данная картинка будет использовать карту, у которой id="formTime".
Видим, что есть общее изображение которое состоит из двух элементов где левая часть зеленная должна вести на один сайт, а правая синяя часть на другой сайт. И нужно сделать так, чтобы ссылки были только на этих двух областях. Это делается с помощью, так называемой техники, image map , то есть на изображение накладывается невидимая карта, на которой выделяются определенные области, которые и будут перенаправлять пользователя по разным адресам.
Создается та самая карта с помощью тега <map>. Это парный тег и должен обязательно иметь закрывающийся тег </map>. Данной созданной карте требуется задать идентификатор id="forTime" и имя name="forTime".
С помощью тега <area>, внутри этой карты создаются области, которые будут по-разному реагировать при наведении мыши и соответственно переправлять пользователя на тот или иной сайт. Данному тегу обязательно нужно указать ряд атрибутов. Первый - это href=" https://webteoretik.ru" показывающая, куда будет вести данная область при клике. Второй атрибут - это shape="rect", задающий форму для нашей области. Для этого атрибута доступны три формы:
- rect - Примоуголььник
- circle - Круг
- poly - Многоугольник (произвольная форма)
И последний, третий, самый важный атрибут, задающий координаты области - это coords="27,20,270,85". Как нам получить эти координаты? Так как форма у нас четырехугольная, то нужно задать четыре координаты нашей области. То есть мы от левого и от верхнего края картинки указываем отступ в px до начала нашей области и также отмеряем размер нужной области по высоте и ширине, т.е. до конца нужной области. Вот эти четыре координаты и нужно указать.
Данные координаты можно определить «на глаз», что будет крайне не точно, или можно измерять специальной линейкой. Вот так мы создали одну область на картинке, точно также создается и вторая область на картинке с присвоением ей других координат.
Для определения координат области на картинке, можно также воспользоваться online генератором, который за вас создаст всю карту для ваших областей. Для этого заходим на этот сайт и в несколько шагов создадим нашу карту.
- 1. Выбираем наше изображение.
- 2. Загружаем изображение, на сервер, нажав на кнопку Upload.
- 3. Нажимает кнопку accept.
Появляется, изначально нулевая область, где мы выбираем форму области (прямоугольник, круг, многоугольник), затем выделяем первую область, после чего в следующем поле появятся координаты, в поле href указываем куда будет ссылается наша область, задаем описание к этой области, и выбираем способ открывания страница в новом окне или в место первоначальной. Точно так же поступаем и следующей областью. Затем ниже нажимаем кнопочку code где появится сгенерированный код нашей карты.
Копируем сгенерированный код и вставляем нашу карту после изображения. Не забудьте в изображении изменить значение атрибута usemap на тот, что сгенерировался в идентификаторе. Если Вы все сделали верно, то должна появиться картинка, поделенная на две области каждая из которой будет вести на разные страницы.
В результате Вы должны были получить такую же картину как в Демо странице. Вот так с обычного изображения можно создавать ссылки на другие страницы. На этом мы завершим и перейдем к следующему уроку.
CSS