0

我有两个 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>

有什么办法吗？

4

1 回答 1

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
}

希望这可以帮助。

于 2012-11-12T21:03:48.223 回答