온라인 대화식 이미지 맵을 개발하기 위해 어떤 "플랫폼"을 사용해야합니까?

Question

사용자가 이미지 위에 마우스 포인터를 올려 놓을 수있는 간단한 대화 형 이미지 맵을 만들려고합니다. 그러면 설치 프로그램이 팝업 상자를 애니메이션/표시/숨기기 해제합니다 (새 창이 아님). !) 마우스 포인터의 현재 위치 옆에 텍스트, 이미지, & | 클릭 가능한 링크.

그러나이 예에서 이미지 맵은 아니지만 9 개의 작은 이미지입니다. 마우스로 가리키면 각 이미지가 조금 더 커지고 클릭하면 이미지가 페이지의 오른쪽 <div>에로드됩니다.

나는 이러한 기준을 만족시키기 위해 찾고 있어요 :

내가 대신 9 개 작은 이미지

나는 또한 이미지를로드하기 위해 호버링 조치를 원하는의 이미지 맵 (HTML 등)를 사용할

• -
• 내가 페이지를 볼 수하고자하는 이미지를 클릭 할 필요를 제거 & 상호 작용하는 모든 인기있는 시청자들 - 데스크탑 브라우저, 모바일 브라우저, 아이 패드, 안드로이드 태블릿 등 ...

위의 기준 목록을 만족시키기 위해 어떤 플랫폼 (일명 - dev 도구 조합)을 사용해야할지 모르겠습니다. 주요 목표는 위의 기준 목록에있는 마지막 항목을 충족시키는 것입니다. 마지막 항목을 만족시키기 위해해야 ​​할 일이 있다면 위의 목록에서 첫 번째 또는 두 번째 기준을 희생 할 수 있습니다.

"플랫폼"내가 사용하는 생각의 부부가 있었다 :

• HTML + CSS
• jQuery를 + CSS
• 플래시 + 액션 스크립트
• 자바 스크립트 + AJAX

무엇 이 도구를 사용하여 도구를 풀어야합니까?

내가 누락되었지만 위에 나열된 도구 대신 도구를 사용해야하는 다른 도구 또는 도구 집합이 있습니까?

미리 감사드립니다.

---

편집 : 당신이 닫 투표하면는 이미이 나 닫을하지 마십시오을 커버 질문에 저를 리디렉션하십시오! 이 질문은 답할 만하다. 토론이 아니다.

Answer 1

스트레이트 HTML/CSS (JS는 필요하지 않음)에서 구현하는 것이 매우 간단하며 이는 가장 널리 사용되는 방법입니다. 이것은 매우 기초적인 예입니다하지만 당신에게 - http://csshowto.com/effects/css-image-maps-with-pop-up-tool-tips/ 당신은 당신이 원하는만큼 정교한 팝업 컨텐츠를 만들 수

가 :

• 최종 제품 : http://csshowto.com/examples/imagemap/
• 방법 다음은 간단한 예제 목록 항목에서 임의의 HTML을 사용할 수 있습니다. 또한 멋진 현대 브라우저에서 멋지고 반짝이는 장면 전환을 위해 CSS3 애니메이션을 뿌릴 수도 있습니다.