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元素上必须是唯一的。您可以通过区域元素上的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
}

希望这有帮助。

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

1 个答案: