Интерактивная картинка

Question

Как это сделать - например, изображение комнаты, но с интерактивными деталями, например, если вы нажимаете на картинку на стене, открывается галерея, или если вы нажимаете на телевизор, воспроизводится какое-то видео и т. Д. ... я вообще не использую flash, но, возможно, это вариант, но я ищу какой-то другой способ сделать это, я даже не уверен, что именно следует использовать здесь, есть ли способ сделать это с помощью файл изображения или, может быть, какой-нибудь Canvas, SVG ... я не знаю. Есть предложения? Ty

Лерон

Answer 1

Самый простой способ добиться этого - использовать карту изображений:

http://en.wikipedia.org/wiki/Image_map

Код из артикула:

<img src="image.png" alt="alternative text" usemap="#mapname" />
<map name="mapname">
    <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" />
</map>

Вы наносите на карту области изображения с координатами (дверь, телевизор), и те становятся кликабельными.

Затем можно использовать JavaScript для отображения галереи или видео над частями изображения.

Answer 2

Возможно, используйте HTML-карту и, кликнув, откройте изображения / видео через Javascript и дайте пользователю возможность отключить видео, изображение и т. Д.

Вот отличный пример: http://www.w3schools.com/tags/tag_map.asp

Answer 3

Использовать тег HTML MAP / Area

http://www.w3.org/wiki/HTML/Elements/area