I have an image map, lets say from Canada with its provinces. Hovering over the provinces highlights the province. I want each province to be clickable. Once clicked, a new window shall be opened where a Quiz build out of JS, jQuery, HTML and CSS shall run, regarding the clicked province.
The image map and the highlighting works, the quiz works as well. I am having trouble putting both of them together. What I do not want is something like this.
<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");
}
This creates a page with a new URL. I want something like a canvas to be opened, where I can insert my Quiz. Something like this http://www.photocase.com/photobrowser.asp (when hovering over the photos) but not on a mouseover, but on a click and then with function in that window. I have seen this a lot for photographs (small preview, onclick a canvas like thing opens with the photograph in big and a x button to close the window) but I do not know the name and cannot find anything online.
Does anyone have a hint?
If you're opening a new window, you're going to have to pass in something so the new window knows what province was clicked. You can do that by appending a query string to the url, so "Sample.html?province=Ontario" or somethign like that. Then your quiz page can grab that query param and use it to populate the quiz.
If you want it to be an in-page solution, you'll use a modal window or a lightbox (two names for virtually the same thing). Just do a search for javascript lightbox or something and you'll find lots of options.