0

私は 2 つの php ページを持っています。1 つはテーブルを作成し、もう 1 つはグラフを作成しています。私の 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」に表示されます。

しかし、私は両方の領域タグを 1 つだけにしたいので、彼が画像をクリックすると、両方が次のように表示されます。

<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 に答える