1

作成したカスタム ツールチップをイメージ マップに接続する方法がわかりません。基本的に、ツールチップ機能を呼び出すためにエリアタグに何を入れればよいかわかりません。私が試したすべてが機能しないか、デフォルトのツールチップに表示されます。誰かがチェックアウトしたい場合は、jsFiddle で例を作成しました。すべての助けをいただければ幸いです。

これが例ですhttp://jsfiddle.net/edocrug15/yNAsy/

$(document).ready(function () {
//Tooltips
$(".tip_trigger").hover(function () {
    tip = $(this).find('.tip');
    tip.show(); //Show tooltip
}, function () {
    tip.hide(); //Hide tooltip        
}).mousemove(function (e) {
    var mousex = e.pageX + 20;
    var mousey = e.pageY + 20;
    var tipWidth = tip.width();
    var tipHeight = tip.height();

area title="This is the left eye" shape="rect" coords="373,365,404,402" href="#"

ツールチップを表示するには、エリア タグに何を入力すればよいですか?

4

2 に答える 2

1

これを行うには、イベント ターゲットを使用して、イベントをトリガーした領域からテキストを取得します。

$(".tip_trigger").hover(function (e) {
    tip = $(this).find('.tip');
    var tipText = $(e.target).attr('title');
    tip.html(tipText);
    tip.show(); //Show tooltip
}

この更新されたフィドルを参照してください: http://jsfiddle.net/yNAsy/3/

于 2013-01-30T00:46:01.643 に答える
0

フィドルにいくつかのコードがありません (例: example.js とクラス "tip" の要素)。領域で hover (mouseenter、mouseleave) イベントを使用し、クラス「tip」を使用して title 属性を要素にコピーする必要があります。

$("area").hover(function () {
    console.log("hover");
    $(".tip").html($(this).attr("title"));
}
于 2013-01-30T00:38:22.610 に答える