0

私は次の状況にあります：チャートを表示するためのバー（特定の高さのdiv）を含むdiv。バーのあるメインdivの上に、マスクが配置された画像が配置されているため、バーの代わりに図を見ることができます。（統計を表示する男性と女性がいます。たとえば、添付の画像を参照してください）。

バーはmousemoveイベントにアタッチされ、ツールチップにバーに関する情報を表示します。

バーにカーソルを合わせると、画像がブロックしているため、マウスムーブが表示されません。画像にカーソルを合わせても、mousemoveイベントをバーにバインドして、必要な情報を取得することはできますか？最終結果は、バーからの情報を含むツールチップを表示することです。

ここに画像の説明を入力してください

4

4 に答える 4

2

画像の上にいくつかの追加のdivを作成し、それらをホバリングに使用できます。しかし、それは少し厄介になる可能性があります。

または、4つの領域でHTML画像マップを作成できます。各領域にはonmouseoverプロパティがあり、非常にクリーンです。

<MAP NAME="mymap">
    <AREA SHAPE="RECT" COORDS="0, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar1')" NAME="bar1">
    <AREA SHAPE="RECT" COORDS="100, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar2')" NAME="bar2">
    <AREA SHAPE="RECT" COORDS="200, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar3')" NAME="bar3">
    <AREA SHAPE="RECT" COORDS="300, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar4')" NAME="bar4">
</MAP>
<IMG SRC="mybarmask.png" USEMAP="#mymap" />

ここでの調整はおそらく間違っています。私は自分のコンピューターを使用していないので、テストできません...

于 2011-03-25T22:01:15.983 に答える
1

幅が等しいと仮定すると、次のことを行う必要があります。

  1. コンテナのオフセットを見つけます： 

    var DOMOffset = function(el) {
    var curleft, curtop;
    curleft = curtop = 0;
    if (el.offsetParent) {
        do {
            curleft += el.offsetLeft;
        curtop += el.offsetTop;
    } while (el = el.offsetParent);
    }
    return [curleft,curtop];
}

  2. 処理するすべてのイベントの画像リスナーにアタッチし、それらを適切なDOM要素に委任する関数にバインドします。のようなものMath.floor((event.clientX - container_offset_X) / count_of_your_bar * width_of_your_bar)は、適切なバー要素のゼロベースのインデックスを提供するはずです。委任自体は、次のコードの変更を使用して実行できます。

    quickDelegate = function(event, target) {
    var eventCopy = document.createEvent("MouseEvents");
    eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
    target.dispatchEvent(eventCopy);
};

    ここで、eventは画像によってキャッチされた元のイベントでtargetあり、検出したバーのDOM要素です。

この委任関数は少し前に作成したものであり、FirefoxとChromeのみを対象としていたことに注意してください。IEを機能させるには、おそらく何かを修正する必要があります。

于 2011-03-26T00:04:20.350 に答える
0

mouseenterとmouseleaveは、他の要素でも機能します。

于 2011-03-25T22:05:04.700 に答える
0

この問題に対する私のアプローチ（解決策）は次のとおりです。

これらの図のそれぞれについて、2つの画像があります。1つは内部が空白なので、図の境界線だけで、もう1つは上から下に完全に色付けされています（オレンジ色）。

その後、あなたはこのようなものを持つことができます：

<div class="empty">
    <div class="full">&nbsp;</div>
</div>

適切な高さと幅、およびのよう.emptyに、空の画像があります。調整されたが固定された幅と。backgroundposition:relative.fullheightposition:absolute; bottom: 0; left=0

次に、マウスオーバーをオンにする.emptyか、.full好きなことを行うことができます

于 2011-03-25T22:07:30.493 に答える