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

【问题标题】：How can I show a small image and a paragraph by mouse hovering on another mapped image area?如何通过鼠标悬停在另一个映射图像区域上来显示小图像和段落？
【发布时间】：2012-12-20 16:37:10
【问题描述】：

这将比我的话更好地解释我想要什么： 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">

【问题讨论】：

标签： jquery html css hover imagemap

【解决方案1】：

使用jQuery mouseover 事件。

您可以将它附加到文档准备好的“区域”标签上。

$(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.
    });
});

【讨论】：

感谢代码，但我对 jquery 有点陌生。我不知道如何将它附加到区域标签。仅仅通过提及区域标签的 id 似乎不起作用。在“在这里做展示”中，我尝试使用加载图像，但它不起作用。你能更详细地说明如何只为一个房间做这件事吗？问候
在我看来，jQuery 选择器可能非常令人困惑。
$('area[name^="room"]') 这个语句中的“房间”是什么，是什么的类或id？
方括号[] 表示属性选择器。它们遵循以下语法： [{attributename}{special character}='{attribute value}'] 特殊字符表示属性将如何等于值。 ^ 表示属性值以提供的匹配值开头。
好吧，我不用javascript就可以工作了。你认为在 html 中做同样的事情（鼠标悬停）和在 jquery 中做同样的事情有什么不同吗？

【解决方案2】：

这是我为使其工作所做的工作：我创建了一个带有“mouseover”和“mouseleave”属性的 div。在其中我收到了另一个元素的 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>

我发布了自己的答案，以便它也可以帮助其他人做同样的任务:)

【讨论】：