一个区域标签显示两个href文件

Question

我有两个php页面，一个正在创建表格，另一个正在创建图形。 我的index.html文件应该同时调用它们，并在某些人单击图像时在主页上同时显示表格和图形。 我已经使用了这段代码

<div id="upload_target"   ></div>
<div id="upload_target2"   ></div>


<img src="image.png" alt="hello"  usemap="#use" >
<map name="use">
    <area shape="poly" coords="..." href="table.html" target="upload_target">
    <area shape="poly" coords="..." href="graph.html" target="upload_target2">
</map>

因此，当用户单击area_1表时，将在“ upload_target”中显示，而当用户单击area_2时，该表将在“ upload_target2”部分中显示。

但是我只想为它们两个都设置一个区域标签，因此当他单击图像时，都可以显示如下内容：

<img src="image.png" alt="hello"  usemap="#use" >
    <map name="use">
        <area shape="poly" coords="..." href="table.html" target="upload_target" href="graph.html" target="upload_target2">

    </map>

有什么办法吗？

Answer 1

不幸的是，属性在HTML元素上必须唯一。 您可以通过在area元素上执行onclick事件来完成此操作。

例如，您可以尝试以下HTML：

<div id="upload_target1"></div>
<div id="upload_target2"></div>
<img src="image.png" alt="hello"  usemap="#use" />
    <map name="use">
        <area shape="poly" coords="..." target1="table.html"  target2="graph.html" onclick="return loadContent(this);" />
    </map>

使用javascript函数：

function loadContent(ele) {
    var target1 = ele.getAttribute('target1'), 
        target2 = ele.getAttribute('target2');
    //Make 2 AJAX requests to load the information
    //If you are using jQuery, it is as simple as
    $('#upload_target1').load(target1);
    $('#upload_target2').load(target2);
    return false; //Prevent the default action from happening
}

希望这可以帮助。