2013-06-07 2 views
0

Я хочу создать карту, которая меняет изображения, когда я нажимаю на нее, или дает ссылки где-то.Как легко создать HTML5-карту?

Я знаю, что это можно сделать с помощью HTML5, мне нужно добавить координаты, не так ли? Проблема в том, что потребуется несколько лет, чтобы сделать это вручную с помощью Photoshop и написать все координаты вручную .... есть ли способ сделать это быстрее или с программой?

То код (если вы не знаете):

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> 
<map name="planetmap"> 
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> 
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> 
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" /> 
</map> 

Эта карта, например: http://upload.wikimedia.org/wikipedia/commons/a/aa/Europe_map.png

+0

В Dreamweaver есть встроенные функции. Затем вы можете выбрать границы с помощью мыши. Поскольку у меня нет Dreamweaver на этом компьютере, вот видео-учебник, где вы можете найти его: http://www.youtube.com/watch?v=seWbi5UE4o4 –

+0

Вы можете использовать Illustrator для создания векторизованных фигур и экспорта их в качестве SVG для получения координат. (Или даже напрямую использовать SVG). Вы даже можете использовать конвертер SVG-HTML5: http://www.professorcloud.com/svg-to-canvas/ – Cristy

+0

Что вы используете в этом примере, это карта изображения. Это не функция HTML5. Он был представлен более десяти лет назад в HTML 3.2. – Philipp

ответ

0

Вы можете попробовать использовать iiCreator импортировать изображение, а затем определить пользовательские области, которые вам хотите изменить или показать всплывающее окно при наведении курсора мыши.

Смежные вопросы