Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:37
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №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 программ.


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru