Урок №14: карта ссылок
Как вы уже знаете, ссылку можно встроить в любое изображение. На этом уроке мы научимся встраивать ссылки в определенные области изображения. Вам наверняка попадались графические меню, где кликнув по определенному рисунку на картинке, вы переходили по соответствующей ссылке или навигационные географические карты, в которых, если кликнуть по определенной стране, она всплывала уже в приближенном виде, или открывался сайт посвященный данной стране.
Изображение для этих целей можно отредактировать и создать с помощью обычного windows приложения "Paint" или более продвинутой программы "Photoshop".
Справа находится изображение, с клавиатурой и долларами. Его габариты 300х300 в пикселах. Для примера используем его правую сторону для ссылки на главную, которая посвящена заработку в интернете, а левую - для ссылки на страницу первого урока по HTML.
Для создания и описания таких областей существует парный тег <map>, с параметром name, который задает название области и используется для ссылку на эту карту. Карта подключается с помощью параметра тега <img> - usemap. Значением этого параметра выступает название нашей карты ссылок, перед которым обязательно ставится символ решетка #. HTML-код с применением карты ссылок: <img src="map.gif" usemap="#map" border="0"> <map name="map"></map>
Для описания областей изображения, которые предназначены для ссылок, в контейнере <map> используется тег <area>, который имеет следующие параметры:
- shape - задает форму области, данный параметр имеет следующие значения:
- rect - прямоугольная область
- circle - круглая область
- poly - область в виде многоугольника
- default - вся область
- cootds - задает координаты отдельной области, в зависимости от значения параметра shape:
- для значения rect - задаются координаты верхнего левого и правого нижнего углов прямоугольника
- для значения circle - задаются координаты центра круга и его радиус
- для значения poly - задаются координаты вершин многоугольника в необходимом порядке.
- href - задает адрес ссылки данной области
- target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу
- alt - задает альтернативный текст для данной области
В нашем примере всего две ссылки, а значит необходимо две области. Каждую область отметим тегом <area> с параметром rect, так как область прямоугольная. Осталось определиться с координатами, делается это по принципу, x-горизонтальные координаты, y-вертикальные координаты. Наш рисунок 300х300, а значит координаты левой области будут x=1 y=1, x=150 y=300. Таким образом координаты правой - x=150 y=1, x=300 y=300. Зададим полученные данные в HTML-код:
<img src="http://phantomx5.ucoz.ru/rabota-doma-300x300.jpg" usemap="#map" border="2" align="right"> <map name="map"> <area shape="rect" coords="1,1, 150,300" href=" http://phantomx5.ucoz.ru/index/jazyk_html/0-19" alt="Учеба" title="Учеба"> <area shape="rect" coords="150,1, 300,300" href="http://phantomx5.ucoz.ru" alt="Работа" title="Работа"> </map>
|
Справа находится результат. Теперь при наведении на картинку, курсор примет вид, как при нажатии на ссылку. В результате, кликнув по правой области картинки - вы попадете на главную, которая посвящена заработку в интернете, кликнув на левой области вы попадете на страничку первого урока HTML, как и было задумано. Опытные веб-дизайнеры строят целые деревья ссылок, с помощью этого способа.
Координаты не всегда получится указывать "на глаз", поэтому существуют программы, которые помогут при работе с разметкой областей изображения. Хорошо подойдет Image Ready, который входит в комплект Photoshop программ.
|