Какую «платформу» следует использовать для разработки интерактивной карты изображений?

Question

Я пытаюсь создать простую интерактивную карту изображения, где пользователь сможет навести указатель мыши на часть изображения, и в свою очередь установка будет анимировать/показать/показать всплывающее окно (не новое окно) !) рядом с текущей позицией указателя мыши, содержащей текст, изображения, & | интерактивные ссылки.

Однако в примере это не карта изображения, а 9 небольших изображений. Каждое изображение становится немного большим при зависании, и при нажатии на него изображение загружается вправо <div> на странице.

Я ищу, чтобы удовлетворить эти критерии:

• Я хочу использовать карту изображения HTML (или другие) вместо 9 маленьких изображений
• Я хочу, чтобы действие зависания также загрузить изображение - удалить нужно нажать на изображение
• Я хочу, чтобы страница просматриваться & интерактивный из всех популярных зрителей - настольных браузеров, мобильных браузеров, IPADS, Android таблетки, и т.д. ...

Я не уверен, какую платформу (aka - mix of dev tools) использовать для того, чтобы удовлетворить список вышеперечисленных критериев. Основная цель заключается в том, чтобы последний элемент в списке вышеприведенных критериев был удовлетворен. Я мог бы пожертвовать первым или вторым критерием из приведенного выше списка, если это то, что нужно сделать, чтобы удовлетворить последний элемент.

Парочка "платформы" Я думал об использовании были:

• HTML + CSS
• Jquery + CSS
• Вспышка + Actionscript
• Javascript + AJAX

Что набор инструментов, я должен использовать, чтобы снять это?

Есть ли другой инструмент или набор инструментов, которые мне не хватает, и их следует использовать вместо перечисленных выше?

Заранее благодарен!

---

EDIT: Если вы голосуете, чтобы закрыть это, пожалуйста, перенаправить меня к вопросу, который уже покрывает это или не закрывайте его! Этот вопрос отвечает - это не дискуссия.

Answer 1

Это довольно просто реализовать в прямой HTML/CSS (не требуется JS), что было бы наиболее широко используемым методом. Вот простой пример:

• Конечный продукт: http://csshowto.com/examples/imagemap/
• Как: http://csshowto.com/effects/css-image-maps-with-pop-up-tool-tips/

Вы могли бы сделать всплывающее содержание сложным, как вам нравится - это довольно зачаточном пример, но вы может использовать любой произвольный HTML в элементах списка. Кроме того, вы могли бы побрызгать некоторыми анимациями CSS3 для переходов, которые выглядели бы красивыми и блестящими в ваших фантастических современных браузерах.