如何通过鼠标悬停在另一个映射的图像区域上显示小图像和段落

Question

这将比我的话更能说明我想要什么:http://jquery-image-map.ssdtutorials.com/尽管教程是可用的，但它是在photoshop中使用图像叠加完成的。但是我使用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">

Answer 1

使用jQuery mouseover事件

您可以将它附加到document ready上的'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.
    });
});

Answer 2

我是这样做的:我创建了一个div的"mouseover"one_answers"mouseleave"属性。在它里面，我收到了另一个元素的id，当我把鼠标悬停在这个div上时，我想显示这个元素。

<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>

我把我自己的答案贴出来，这样也可以帮助其他人做同样的任务。