0

これは私の言葉よりも私が欲しいものをよりよく説明します：http： //jquery-image-map.ssdtutorials.com/ チュートリアルは利用可能ですが、それはフォトショップで画像オーバーレイを使用して行われます。しかし、jqueryプラグイン「jquery.maphilight.js」を使用して、マップされた画像を強調表示しています。それを使用して、マップされた画像があり、画像にマウスを合わせると、マップされた部分が強調表示されます。人が特定の部屋（マップされた部分）にマウスを置いた場合、どうすれば小さな画像と段落を表示できますか。

これがjavascriptです：

 $(function () {
        $(".mapping").maphilight();
        $("#mapping").css('visibility','hidden')

    $(".hoverable").css("border", "3px solid red");

＆これは画像マッピングのhtmlです：

<div class="mapping"> 
<map name="gmap">
<area shape="poly" id="cr1" coords="550,277,485,342,533,385,597,322" href="#" alt="cr1" name="room-1">
<area shape="poly" id="cr2"coords="579,246,627,200,672,246,624,290" href="#" alt="cr2" name="room-2">
4

2 に答える 2

0

jQueryのマウスオーバーイベントを使用します。

ドキュメントレディの「area」タグに添付します。

$(document).ready(function(){
    //this selector is selecting an element by the id of cr1.
    $('#cr1').on('mouseover', function(){
        //do your showing here
    });

    $('#cr1').on('mouseleave', function(){
        //do your hiding here
    });
});

汎用ハンドラーの場合、次のことができます。

$(document).ready(function(){
    //this is an attribute selector.
    //'area' is the typ of tag to match
    //[name indicates the attribute is named 'name'
    //^= indicates the attribute 'name' should start with the value following this operator
    //'room'] think of this as indicating the value of the name attribute
    // should match: 'room*'
    $('area[name^="room"]').on('mouseover', function(){
        //do your showing here, be sure to show only 
        //for the appropriate area. Maybe select on the id.
    });

    $('area[name^="room"]').on('mouseleave', function(){
        //do your hiding here. This could be generic unless you have
        //a multi-paragrah area instead of a single display area.
    });
});
于 2012-12-20T16:46:50.670 に答える
0

これを機能させるために私がしたことは次のとおりです。「mouseover」および「mouseleave」属性を持つdivを作成しました。その中に、このdivにマウスを置いたときに表示したい別の要素のIDを受け取りました。

<div  
    onmouseover="document.getElementById('div1').style.display = 'block';"  <!-- element inside brackets will be shown-->
    onmouseout="document.getElementById('div1').style.display = 'none';"> 
<area shape="poly" id="cr1" class="jTip" coords="550,277,485,342,533,385,597,322"
href="car_park_1.html" alt="cr1" name="room-1">
</div>

他の人が同じ仕事をするのにも役立つように、私は自分の答えを投稿しました:)

于 2012-12-21T11:53:16.613 に答える