이미지지도 새로운 윈도우 열기

Question

나는 지방을 가진 캐나다에서 이미지지도를 가지고 있습니다. 주 전역으로 가져 가면 해당 주를 강조 표시합니다. 각 지역을 클릭 할 수 있기를 바랍니다. 일단 클릭하면 클릭 된 주와 관련하여 JS, jQuery, HTML 및 CSS가 실행되는 퀴즈가 실행되는 새 창이 열립니다.

이미지 맵과 강조 표시가 작동하며 퀴즈도 작동합니다. 나는 그 둘을 모으는데 어려움을 겪고있다. 내가 싫어하는 것은 이런 것입니다.

<area shape="poly" coords="0,161,4,161,4,162,12,162,12,163,19,163,26,165,34,166,45,168,52,170,62,174,73,177,82,180,91,184,103,188,112,192,122,196,133,202,142,207,152,212,162,216,172,221,180,224,186,227,193,230,197,233,0,233,0,161" id="helecho" href="javascript:winOpen()" alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()"> 

//js function 
function winOpen(){ 
window.open("Sample.htm",null,"height=400,width=400,status=yes,toolbar=no,menubar=no,location=no"); 
} 

이렇게하면 새 URL이있는 페이지가 만들어집니다. 나는 퀴즈를 삽입 할 수있는 열린 캔버스와 같은 것을 원합니다. http://www.photocase.com/photobrowser.asp (사진 위로 마우스를 가져 갔을 때)과 비슷하지만 마우스 오버시에는 보이지 않지만 클릭 후 그 창에서 기능을 사용합니다. 사진 (작은 미리보기, onclick과 같은 캔버스가 큰 사진과 x 버튼을 창을 닫을 때 열리는 사진)을 많이 보았지만 이름을 알지 못하고 온라인에서 아무것도 찾을 수 없습니다.

힌트가 있습니까?

Answer 1

새 창을 여는 경우 새 창에 어떤 주를 클릭했는지 알 수 있도록 무언가를 전달해야합니다. URL에 쿼리 문자열을 추가하여이 작업을 수행 할 수 있습니다. 따라서 "Sample.html?province=Ontario" 또는 그런 식으로 할 수 있습니다. 그런 다음 퀴즈 페이지에서 해당 쿼리 매개 변수를 가져 와서 퀴즈를 채 웁니다.

페이지 내 솔루션이기를 원하면 모달 창이나 라이트 박스를 사용하십시오 (사실상 동일한 이름의 두 이름). 그냥 자바 스크립트 라이트 박스 또는 무언가를 검색하면 많은 옵션을 찾을 수 있습니다.