Отправляет email-рассылки с помощью сервиса Sendsay

RFpro.ru: Хитрости и секреты создания сайтов

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Личные финансы" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Калашников О.А.

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

RusFAQ.ru: Хитрости и секреты создания сайтов


РАССЫЛКИ ПОРТАЛА RUSFAQ.RU

/ КОМПЬЮТЕРЫ И ПО / Интернет / Хитрости и секреты создания сайтов

Выпуск № 159
от 25.10.2007, 09:05

Администратор:Ерёмин А.А.
В рассылке:Подписчиков: 453, Экспертов: 41
В номере:Вопросов: 1, Ответов: 2

Вопрос № 106135: Здравствуйте. Имеется карта Украины. Необходимо сделать так, чтобы при наведении мыши на какую либо область страны, область меняла свой цвет (это не обязательно) и при нажатии осуществлялся переход на другую страницу. При этом область должна выделять...

Вопрос № 106.135
Здравствуйте. Имеется карта Украины. Необходимо сделать так, чтобы при наведении мыши на какую либо область страны, область меняла свой цвет (это не обязательно) и при нажатии осуществлялся переход на другую страницу. При этом область должна выделяться не прямоугольной областью, а по всем географическим границам (то есть нестандартной формой). Подскажите как и с помощью какой программы такое можно сделать. Буду очень благодарен за подробный, пошаговый ответ, так как я начинающий.
Отправлен: 20.10.2007, 08:43
Вопрос задал: Александр Данилюк (статус: 1-ый класс)
Всего ответов: 2
Мини-форум вопроса >>> (сообщений: 0)
Отвечает: Web-Extrime
Здравствуйте, Александр!

В данном вопросе вам помогут карты изображений позволяющей пользователю привязывать ссылки на другие документы к отдельным частям изображений. Щелкая мышью на отдельных частях изображения, пользователь может выполнять те или иные действия, переходить по той или иной ссылке на другие документы и т.п.
Если вы хотите использовать технологию картирования изображений, то вам необходимо использовать браузер, поддерживающий данную технологию!
Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тег IMG:

<IMG SRC="url" USEMAP="url#map_name">

Параметр USEMAP указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения какой URL соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Помещение карты в другой документ позволяет собрать все карты изображений в одном документе (если у вас их несколько в различных документах), но добавляет еще одну итерацию в сети, когда за перыую итерацию выясняется местонахождение карты, а за вторую - выполнение действия, предписанного URL для данного участка изображения. Параметр map_name указывает имя карты для изображения, а предшествующий ему URL определяет местонахождение карты. Если данный URL отсутствует, то карта с указанным именем ищется в текущем документе.
Рассмотрим синтаксис определения карты изображения:

<MAP NAME="map_name">
<AREA [SHAPE=" shape "] COORDS="x,y,..." [HREF=" reference "] [NOHREF]>
</MAP>

Параметры:

<MAP NAME="map_name">

Данный тег определяет начало описания карты с именем map_name.

<AREA...>

Описывает участок изображения и ставит ему в соответствие URL. Параметры:

SHAPE
Необязательный параметр, указывающий на форму определяемой области изображения. Может принимать значения:
default - по умолчанию (обычно прямоугольник)
rect - прямоугольник
circle - круг
poly - многоугольник произвольной формы
COORDS
Координаты в пикселах описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга - три координаты (две - центр круга, третья - радиус). Для многоугольника это описание каждого угла в двух координатах - соответственно число координат равно удвоенному количеству углов.
Координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание:

<AREA COORDS="0,0,99,99" ...>

HREF="url"

Описание ссылки, действия по которой будут выполняться при щелчке мыши в заданной области.

NOHREF

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

</MAP>

Данный тег завершает описание карты изображения.

Можно поступить более проще, использовав утилиты, такие как "HTML Map Designer" или "Map Edit" для создания разнообразных карт изображений. Загрузить данные программы можно тут.

Удачи!

---------
Делай добро сам, и всегда помни что сделали для тебя!
Ответ отправил: Web-Extrime (статус: Практикант)
Ответ отправлен: 20.10.2007, 11:01
Оценка за ответ: 5
Комментарий оценки:
Спасибо за подробный ответ. Я конечно не достиг такого уровня, чтобы составлять карту вручную, поэтому буду пробовать программы, указанные Вами.
Отвечает: Shapoklak
Здравствуйте, Александр Данилюк!
Это совсем не сложно, даже интересно.
Вот Вам архив, распакуйте. Это папка, в ней несколько файлов.
Файл new_page_1.htm - это тот самый файл с "картой", который Вам нужен для дальнейшей перереботки. Изображение компьютера "разрезано" на несколько областей, каждая из которых является гиперссылкой на другие странички из этой папки. Откройте её в браузере, далее посмотрите html-код страницы.
Обратите внимание вот на что: монитор выделен прямоугольной областью (shape="rect", задаются X и Y каждого угла), принтер - кругом (shape="circle, задается X, Y центра и радиус), а вот клавиатура - это то, что Вам нужно - полигональная область (shape="poly", задаются X и Y каждой угловой точки - тут главное, порядок не перепутать, двигаться, например, против часовой стрелки).
Как разметить координаты. Открываете картинку, которая у Вас будет картой, например, в Фотошопе (даю для 8-й версии, а у себя разберетесь). Можете без дополнительных телодвижений просто посмотреть координаты. Сперва Настройки. Редактирование - Предпочтения - Единицы измерения и линейки. Там выбираете Границы - пиксели. Теперь смотрите на верхнюю панель справа, там вкладка Навигация, щелкните ее. Теперь ведите курсором по картинку. Видите X и Y? это вот они те самые и есть, что Вам нужны. Наводите на нужную точку - списываете значение.
Если нарезка картинки у Вас сложная, чтоб не запутаться, проделайте все так. Вставьте поверх фонового слоя еще один, прозрачный. Слои - Новый слой (цвет - нет). Нарисуйте на нем контрастным цветом все границы (поставьте точку, нажмите Shift, и , не отпуская Shift, нарисуйте многоугольники). Теперь возьмите кисть другого цвета, включите снова панель Навигация. Ставите цветную точку в углу - записываете ее координаты на листик, на котором нарисован (хоть от руки) набросок карты (а можете и на принтере напечатать, если есть, потом поверх пишете координаты точек). Думаю, далее понятно. Выписываете все координаты всех углов всех многоугольников.
Далее заполняете страничку координатами многоугольников с использованием
shape="poly", как в примере.

Приложение:

Прикреплённый файл: Загрузить >>
Срок хранения файла на сервере RusFAQ.ru составляет 30 суток с момента отправки ответа.

Ответ отправила: Shapoklak (статус: Академик)
Россия, Орск
Организация: школа
Адрес: www.school56orsk.narod.ru
WWW: компьютерные фирмы г. Орска
ICQ: 101137510
----
Ответ отправлен: 20.10.2007, 21:48
Оценка за ответ: 5

Отправить вопрос экспертам этой рассылки

Приложение (если необходимо):

* Код программы, выдержки из закона и т.п. дополнение к вопросу.
Эта информация будет отображена в аналогичном окне как есть.

Обратите внимание!
Вопрос будет отправлен всем экспертам данной рассылки!
Для того, чтобы отправить вопрос выбранным экспертам этой рассылки или
экспертам другой рассылки портала RusFAQ.ru, зайдите непосредственно на RusFAQ.ru.


Форма НЕ работает в почтовых программах The BAT! и MS Outlook (кроме версии 2003+)!
Чтобы отправить вопрос, откройте это письмо в браузере или зайдите на сайт RusFAQ.ru.

© 2001-2007, Портал RusFAQ.ru, Россия, Москва.
Авторское право: ООО "Мастер-Эксперт Про"
Техподдержка портала, тел.: +7 (926) 535-23-31
Хостинг: "Московский хостер"
Поддержка: "Московский дизайнер"
Авторские права | Реклама на портале
Версия системы: 4.61.1 от 16.10.2007 		Яндекс Rambler's Top100
RusFAQ.ru | MosHoster.ru | MosDesigner.ru | RusIRC.ru
Kalashnikoff.ru | RadioLeader.ru | RusFUCK.ru
В избранное