Я хочу добавить автоматическую область, выделяющуюся к картам изображения на моей веб-странице. Я нашел, что mapper.js библиотека очень полезна в достижении, это, однако создавая x, y графики вокруг региональной карты является очень трудоемким.
Существует ли быстрый способ создать координаты ограничения неправильного полигона те, которые могут быть найдены на региональных картах?
Править
Должен быть способ сделать это. У меня есть Фейерверки 8, а также фотошоп CS3 на моих окнах PC, но я более знаком с Фейерверками.
Если я создаю пунктирную рамку, я могу щелкнуть правой кнопкой>, Изменяют Пунктирную рамку>, Преобразовывают в Путь. Это создает Путь с несколькими точками, но я не знаю, как добраться до следующего шага, который извлекает провода тех точек.
Я попытался вставить горячую точку, часть полигона, затем экспортировав в "HTML и изображения". Оба из них дают мне квадратные горячие точки, не полигон. Я также попробовал щелчок правой кнопкой по пути и Редактирование> Основы Пути Копии, а также Редактирование> HTML-код Копии. Ни один не дает мне провода полигона.
Я могу только получить провода полигона для части. Существует ли, возможно, способ преобразовать путь к части на Фейерверках 8?
для Fireworks 8:
1) Создайте область выделения с помощью инструмента «Волшебная палочка и область выделения».
2) Щелкните правой кнопкой мыши> Изменить область выделения> Преобразовать в контур
3) Щелкните правой кнопкой мыши путь и выберите «Вставить точку доступа» (или нажмите Ctrl + U)
4) Выберите «Файл»> «Экспорт»
5) Выберите «HTML и изображения» для «Сохранить как тип»
GIMP предлагает плагин / фильтр под названием GIMP image map , который имеет удобный интерфейс для создания карты изображений. Я думаю, он обеспечит ту функциональность, которую вы ищете. Выберите Фильтры -> Интернет -> Карта изображений ...
вызвать диалог
Открыв диалоговое окно «Карта изображения», вы можете создавать многоугольные области к своему удовольствию:
Вы можете создавать и настраивать области по своему усмотрению, изменяя ссылку, замещающий текст, фреймы, сам многоугольник или даже настраивая события javascript.
После того, как вы закончите, сохраните его, и вы сможете использовать фрагмент, который вы только что сохранили в своем html
<img src="us_map.gif" width="771" height="448" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Colin Harrington -->
<area shape="poly" coords="149,292,254,332,308,41,262,33,232,27,169,14,120,9,102,52,92,190" alt="West Coast" href="wc.html" />
<area shape="poly" coords="474,267,522,368,574,62,465,17,422,19,326,51,284,161,293,224,322,250,363,219,419,222" alt="Midwest" href="mw.html" />
<area shape="poly" coords="634,58,583,74,527,360,670,419,757,180,770,65,770,24,705,10,735,29" alt="East Coast" href="ec.html" />
<area shape="poly" coords="380,251,379,285,458,300,464,363,413,426,330,373,287,317,335,323,340,250" alt="Texas" href="tx.html" />
</map>
Если хотите Чтобы остаться в лагере Adobe, ImageReady имеет возможность создавать карты изображений, во многом как GIMP. У них есть руководство по его использованию для создания карт изображений в Интернете , но CSS на странице в настоящее время не работает, и вы не сможете увидеть страницу, пока не распечатаете ее. Тогда он будет выглядеть как этот pdf .
Вот простое, легкое в использовании веб-приложение для создания карт изображений. Оно избавит вас от необходимости иметь дело с дополнительными программами (DreamWeaver, PhotoShop, Gimp и т.д.).
Похоже, что другие ответы были о том, как сделать это вручную (не отвечая на вопрос вообще). Поскольку это сообщение появляется в результатах Google по этой теме, я обновляю информацию, которую я нашел, которая по крайней мере дает отправную точку о том, как сделать это автоматизированным способом:
перспективный PHP, который я рассматриваю: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646
Другие ресурсы, которые я нашел:
http://marakana.com/blog/examples/php-image-filters.html
http://vis.lbl.gov/NERSC/Software/gsharp/help/GsharpWE/userguide/imagemaps.html
http://en.wikipedia.org/wiki/Canny_edge_detector
В основном, поиск по ключевым словам типа "image edge detector" и подобные вещи, кажется, приводят к более релевантным результатам, я все еще ищу тот, который я могу использовать, но я просто немного удивлен, что так много людей, кажется, думают, что это то, что должно быть сделано вручную, когда это было бы гораздо эффективнее сделать программно.