图像地图新窗口打开

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 这样的东西（将鼠标悬停在照片上时），但不是在鼠标悬停时，而是在单击时，然后在该窗口中具有功能。 我已经看到很多照片（小预览，单击画布之类的东西打开，照片大，x 按钮关闭窗口）但我不知道名称，也无法在网上找到任何东西。

有人有提示吗？

Answer 1

如果您要打开一个新窗口，您必须输入一些内容，以便新窗口知道点击了哪个省份。您可以通过将查询字符串附加到 url 来做到这一点，所以 "Sample.html?province=Ontario" 或类似的东西。然后，您的测验页面可以获取该查询参数并使用它来填充测验。

如果您希望它成为页内解决方案，您将使用模式窗口或灯箱（实际上是同一事物的两个名称）。只需搜索 javascript lightbox 或其他东西，您就会发现很多选项。