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

Дек 26, 2012

Формирование карты гиперссылок


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

1 .С помощью программы Paint или Adobe PhotoShop создайте файл map.jpg.

2.В редакторе Блокнот создайте документы, где описано направления работы фирмы, и сохраните их как файлы 1.html, 2.html, 3.html.

<HTML>

<Тить> Заказчики фирмы "Калина" </ тить>

<BODY BGCOLOR=cyan>

<hl> Haiui заказчики </ Н1>

<Н2> Фирма "Карпаты" </ Н2>

<Н2> Фирма "Золотой жук" </ Н2>

<Н2> Фирма "Пролисок" </ Н2>

</ BODY>

</ HTML>

<HTML>

<Тить> Изделия фирмы "Калина" </ тить>

<BODY BGCOLOR=cyan>

<Н1> Наша продукциж/Н1>

<Н2> Шкафы для гостиной </ Н2>

<Н2Жухонни стулья </ Н2>

<Н2> Офисные столы </ Н2>

</ BODY>

</ HTML>

<HTML>

<ТИТИиЕ> Перспективы фирмы "Калина" </ тить>

<BODY BGCOLOR=cyan>

<Н1> Наша будущая продукция </ Н1>

<Н2> омп 'столы </ Н2>

<Н2> Стилизованные аквариумы </ Н2>

<Н2> Набор мебели для лоджии </ Н2>

</ BODY>

</ HTML>

3. Создайте файл map.html, который содержит такой код:

<HTML>

<Тить> Направления работы фирмы "Калина" </ TITLE>

<BODY BGCOLOR=pink>

<IMG SRC="map.jpg" USEMAP="#kalyna">

<MAP NAME="ka1yna">

<AREA HREF = "1.html" ALT = "РАССКАЗ О ЗАКАЗЧИКОВ "

SHAPE = "rect" COORDS = "70,250,160,270">

<AREA HREF = "2.html" ALT = "РАССКАЗ О ПРОДУКЦИЮ "SHAPE =" rect "COORDS =" 260,140,345,160 ">

<AREA HREF = "3.html" ALT = "РАССКАЗ О БУДУЩЕЕ "SHAPE =" rect "coords =" 2,4,98,36 ">

</ MAP>

</ BODY>

</ HTML>

4. Откройте файл map.html в окне браузера.На рис. показана карта ссылок.


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

<НЗ> Выберите на рисунке направление работы фирмы </ НЗ>

Если разместить его между тегами <IMG> и <МАР>, то на странице под картой ссылок отображается надпись «Выберите на рисунке направление работы фирмы». Проведя мышью над рисунком, можно обнаружить, что над горячими областями указатель меняет свой облик, как над обычными ссылками. Если же остановить его над горячей областью, увидите всплывающее надпись - результат действия атрибута ALT в теге <AREA>.

Предыдущая   -    Страница: 4 из 4

Навигация: 1  2  3  4  

Другие статьи по теме:

- Встроенные стили
- Визуальный редактор веб-сайтов
- Раздел каскадных стилей css
- Фреймы, их теги и атрибуты
- Структура html-документа

На российский рынок приходит крупнейший продавец стоковых изображений - Depositphotos.
Издательство "ИндексМаркет" анонсирует книгу Александры Саньковой - под названием "23"
Российская компания создала первый сайт по дизайн-исследованиям, так как тема дизайна не достаточна развита в России
Все подробности здесь - сифоны для ванной - самая детальная информация на сайте!
     Баннеры | Советы web-дизайнеру | Flash | Html и CSS | Уроки Photoshop | Юзабилити
2003-2016 © sredaboom.ru
карта сайта обратная связь на главную