0

私は現在、多くの jQuery を使用する Web サイトを構築しています。これには、インタラクティブなマップが必要です。

マップ上にポイントがありますが、私が必要なのは、マップ ポイントにカーソルを合わせると、小さな説明が表示され (おそらく .mapitem-smalldescription という div に表示されます)、マップ ポイントをクリックすると、多くの写真付きのより大きな完全な説明が表示されます (.mapitem-fulldescription などと呼ばれる別の div で)

別のマップ ポイントで onclick および onhover イベントを実行する方法は知っていますが、それらを 1 つのマップ ポイントにうまく結合できませんでした。

どうすればこれを行うことができますか?

ザック

4

2 に答える 2

4

各マップポイントにクラスがあると仮定しますmappoint。

$('.mappoint').hover(function() {
    //do something on mouseover...
}, function() {
    //do something on mouseout...
}).click(function() {
    //do something on click...
});
于 2011-02-22T17:30:52.770 に答える
2

マップポイントのそれぞれにクラスポイントがある場合、これは機能する可能性があります。

これを試してください：http：//jsfiddle.net/nrwyz/8/。

コード：

HTML

<div class="point">
</div>

Javascript

$(".point").live("mouseover", function() {
    //code to show description
    $(this).append('<div class="mapitem-smalldescription">Small description</div>');
});

$(".point").live("mouseout", function() {
    //code to show description
    $(".mapitem-smalldescription").fadeOut(200);
});

$(".point").live("click", function() {
    //code to full description
    $(this).append('<div class="mapitem-fulldescription">Full description</div>');

});

CSS

.point {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: #550000;
}

.mapitem-smalldescription {
    width: 100px;
    height: 100px;
    background-color: #00FF00;
}

.mapitem-fulldescription {
    width: 100px;
    height: 100px;
    background-color: #FF0000;
}

編集：これはあなたが説明した方法により近い振る舞いをするバージョンです：http：//jsfiddle.net/nrwyz/23/。他に変更または追加する必要があるものがあればお知らせください。

お役に立てば幸いです。

于 2011-02-22T17:34:04.763 に答える