Страница 1 из 11
Модератор форума: o_Lisovenko, JonMagon 
Сообщество uCoz » Вебмастеру » Инструменты и софт для вебмастера » Создание навигационных карт (Программы для создания навигационных карт для html-страниц.)
Создание навигационных карт
EsKorTwo
Сообщений: 23
Репутация: 1

Сообщение # 1 | 22:01:33
Коллеги, не подскажите какие есть инструменты (программы) для визуального создания навигационных карт или по-другому для разметки изображений на области с сылками, т.е. того что в HTML описывается тэгом <MAP> ?
Спасибо!

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

Добавлено (09 Мар 2013, 22:01:33)
---------------------------------------------
Ну пока "суть да дело" - кому праздники, а кому работа, - нашёл то что спрашивал.

Есть такая штука Редактор карт изображений на javascript с описанием создания сей программы. Правда так и не понял кто автор статьи и, соответственно автор программы. В первом чтении попробовал - понравилось!
Ещё одна нашлась под названием Imagination Image Map Editor от Multimedia Australia, правда хотя и предоставляется для скачивания free-версия, но реально оказывается, что бесплатная она только на 20 запусков, в общем ни какая она не бесплатная, а банально trial - пробная.

Пишут ещё на просторах интернета, что такую задачу можно решить с помощью Фотошопа в купе с ИмиджРеди (когда они вместе шли, по-моему до 8-й версии, но сейчас Фотошоп поставляется в гордом одиночестве).
Сообщение отредактировал EsKorTwo - Суббота, 09 Мар 2013, 22:03:01
-=WaMpIr=-
Сообщений: 222
Репутация: 55

Сообщение # 2 | 22:07:13
EsKorTwo, не советую вам пользоваться всякими хелперами напичканными графической оболочкой. Как говорится - профессионального лётчика не заменит ни один компьютер, и в программировании тоже самое. Просто с визуальными редакторами вы рискуете получить не совсем то, что хотелось бы.

Вам помогут, если прикрепите:
- Ссылку на сайт
- Скриншот проблемы через встроенное прикрепление изображений
- HTML (CSS) Код проблемного участка в спойлере
EsKorTwo
Сообщений: 23
Репутация: 1

Сообщение # 3 | 22:18:09
Цитата (-=WaMpIr=-)
не советую вам пользоваться всякими хелперами напичканными графической оболочкой. Как говорится - профессионального лётчика не заменит ни один компьютер, и в программировании тоже самое.
Согласен, я поэтому и спрашивал не о проге "под ключ", т.е. полностью создающую весь html-код, а только позволяющую определить координаты многоугольной, прямоугольной, круглой, если хотите, области на каком-то изображении.
Представьте рисунок, например 1000х500px. Где-то на нём находится фрагмент, контур которого представляет сложную геометрическую фигуру. На него нужно повесить ссылку - как глазами, под лупой, с микроскопом, загибая пальцы или рисуя палочки на бумаге чтоб не забыть, будете отсчитывать пикселы на картинке чтобы определить координаты вершин сей фигуры? Можно, конечно, но так скоро и "помереть" можно или ослепнуть вконец.
А с помощью например, первой, указанной в прошлом "посте", программы это сделать не сложно: загружаю в прогу картинку, общёлкиваю контур и получаю список координат вершин получившейся фигуры - этого мне уже достаточно, большего и не нужно, хотя программа позволяет полностью получить код тэга <MAP> со всем содержимым.
Miss_Esq
Сообщений: 13865
Репутация: 4160
Уровень замечаний:

Сообщение # 4 | 22:23:33
EsKorTwo, А не проще ли поверх изображения div_ами - с ссылками с position: absolute; или чисто ссылками с position: absolute;

Цитата
контур которого представляет сложную геометрическую фигуру

Проблема в том что многогранник, как сетка координат тега MAP считается устаревшей и не рекомендуется к применению ...

Сообщение отредактировал Miss_Esq - Понедельник, 11 Мар 2013, 22:24:25
EsKorTwo
Сообщений: 23
Репутация: 1

Сообщение # 5 | 22:32:03
Цитата (Miss_Esq)
А не проще ли поверх изображения div_ами - с ссылками с position: absolute; или чисто ссылками с position: absolute;
Можно и так, но проблема с определением координат фрагмента в изображении всё равно остаётся - их нужно и для div или для чисто ссылок где-то взять, как-то определить.
Miss_Esq
Сообщений: 13865
Репутация: 4160
Уровень замечаний:

Сообщение # 6 | 22:37:28
EsKorTwo, Видимо как то что то есть для этого, но как правило, например типа карты географические представлены скриптом а не тегом MAP. Для простого тег MAP подходит, а вот для сложного контура, нереально большой код получается ..

EsKorTwo
Сообщений: 23
Репутация: 1

Сообщение # 7 | 23:01:27
Цитата (Miss_Esq)
Для простого тег MAP подходит, а вот для сложного контура, нереально большой код получается ..
Код увеличивается для каждой вершины многоугольника на пару координат: X,Y - для любых методов или способов этот набор координат всё равно нужен.
Например для треугольника - это три пары координат, т.е. 6 штук. Для 10-угольника: 10 пар, т.е. 20 штук будет. Остальной код: ссылка на изображение-карту, имя для тега <map> значение для title, если нужно, и ссылка - куда пойти при щелчке по фрагменту, остаются без изменений.

Если, конечно, фрагмент можно обрисовать прямоугольником, то нужны всего-лишь две пары координат: верхнего левого угла и нижнего правого.
Для окружности ещё проще: пара координат для центра окружности и значение для радиуса.

Есть один маленький недостаток, изображение на страницу должно быть загружено фиксированных размеров равных реальному размеру картинки. А если размеры изображения на странице плавающие, читай, координаты плавающие - то только скрипт и подойдёт.
Сообщение отредактировал EsKorTwo - Понедельник, 11 Мар 2013, 23:03:37
uy0ll2076
Сообщений: 6
Репутация: 2

Сообщение # 8 | 12:59:27
Цитата (EsKorTwo)
инструменты (программы) для визуального создания навигационных карт
Проще всего воспользоваться инструментами API Google Карт или Яндекс.Карты. Пример отображения прямоугольников и многоугольников (круги, овалы) на этой странице - для отображения прямоугольника введите, например "KN79XX" в поле "Grid" и нажмите "Отметить", для отображения сетки - нажмите "Показать сетку", для отбражения кругов - нажмите "Построить".

Здесь пример создания карты с маршрутом с использованием Яндекс.Карты.
mprin
Сообщений: 18
Репутация: 0

Сообщение # 9 | 18:58:03
Цитата
<img src="http://.../karta/1.jpg" alt=" " align="middle" width="525px" height="575px" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,175,115" href="http://../karta/1-1.jpg" class="ulightbox" target="_blank" alt=" ">
<area shape="rect" coords="0,115,175,230" href="http://../karta/1-2.jpg" class="ulightbox" target="_blank" alt=" ">
</map>


Подскажите как сделать!!!
Чтобы при нажатии один раз на картинку (http://../karta/1-1.jpg), которая открывается в новом окне, она увеличивалась,
а при повторном нажатии уменьшалась.
Причем цент увеличения находился в области клика.
Miss_Esq
Сообщений: 13865
Репутация: 4160
Уровень замечаний:

Сообщение # 10 | 22:26:30
mprin, А по наведению курсора ??? runettex.clan.su/index/0-386

mprin
Сообщений: 18
Репутация: 0

Сообщение # 11 | 10:41:00
Miss_Esq, по наведению не подходит.
Есть карта
<img src="http://.../karta/1.jpg" alt=" " align="middle" width="525px" height="575px" usemap="#map1">
<map name="map1">
при нажатии на область карты отрывается часть карты в новом окне
<area shape="rect" coords="0,0,175,115" href="http://../karta/1-1.jpg" class="ulightbox" target="_blank" alt=" ">
а так как она большая, требуется увеличени при нажатии еще раз.
Скинул вам в приват ссылку на страницу.
Сообщество uCoz » Вебмастеру » Инструменты и софт для вебмастера » Создание навигационных карт (Программы для создания навигационных карт для html-страниц.)
Страница 1 из 11
Поиск: