用户通过ImageMapster单击地图区域时，如何更改PHP页面中显示的Google文档？

Question

我是js和php的新手，如果看不到明显的东西，我感到非常抱歉。 这是随后出现问题的情况：

我显示了一个map1.png，当用户将鼠标悬停在该图像的某个区域时，将显示第二个图像的对应区域（map2.png）。 我使用imagemapster使它工作。 这是代码：

    $(document).ready(function ()
{
    $('#areas').mapster({
    singleSelect : false,
    clickNavigate: true,
    render_highlight : { altImage : 'Images/map2.png' },
     mapKey: 'module',
    fill : true, altImage : 'Images/map2.png',
    fillOpacity : 1,
});
});    

这是图像的标记：

<img id="areas" src="Images/map.png" width="927" height="704" alt="Mapa pedagógico" usemap="#areas">    

对于所映射的众多区域之一：

<map name="areas">
<area module="social" shape="circle" coords="463,461,63" href="programmation-noob-social.html" alt="social"/>

事情就是这样： http : //www.eloquatranslations.com/mapa-pedagogico.php

请注意，该页面还显示了Google电子表格。 我想做的就是找到一种方法，当用户单击图像中的某个区域时，该Google文档就会发生更改。 img映射的每个区域应对应一个不同的电子表格。

谢谢您的提示。

Answer 1

解决了！

我给了iframe一个显示 ID，并清空了src标签，因此可以用我的脚本填充它。

<iframe id="show" width="100%" height="610" src=""></iframe>    

在js脚本中，我使用了onClick函数，该函数创建一个变量，该变量将由第二个函数findDoc设置 。 该函数创建一个基于data.key的findDoc变量并提出，在节目的iframe，在src标签。

$(document).ready(function (){
$('#areas').mapster({
onClick : findDoc,
singleSelect : true,
clickNavigate: false,
render_highlight : { altImage : 'Images/map2.png' },
 mapKey: 'module',
fill : true, altImage : 'Images/map2.png',
fillOpacity : 1
});
});
function findDoc(data){
var srcBegin = 'https://docs.google.com/spreadsheets/d/';
var srcEnd = '/pubhtml?widget=true&headers=false';
var srcMid = data.key;
$('#show').attr('src',(srcBegin+srcMid+srcEnd));
}

然后，我在地图的每个区域中将模块密钥设置为相应的Google Doc ID：

<area module="1q7tRr6IkCDjS_mmDRWCj-ViExIPQn8imOu6MTiwKyWw" shape="circle" coords="463,461,63" href="#" alt="social"/>

而且效果很好。

对于真正的程序员来说，这似乎很简单……对我来说，让它运行真是一种快乐！ :)