如何通过鼠标悬停在另一个映射的图像区域显示小图像和段落？ [英] How can I show a small image and a paragraph by mouse hovering on another mapped image area?

问题描述

这将更好地解释我想要的，而不是我的话：
http：// jquery- image-map.ssdtutorials.com/
即使教程是可用的，但它是使用图像叠加在photoshop中完成。
但是我使用jquery插件jquery.maphilight.js突出显示我映射的图像。
使用我有一个映射的图像，并突出显示映射部分如果我鼠标悬停在图像上。
如果某人将鼠标悬停在特定房间（映射部分）上，如何显示小图片和段落。

This will explain better what I want than my words: http://jquery-image-map.ssdtutorials.com/ Even though the tutorial is available but it is done using image overlays in photoshop. But I am highlighting my mapped image using a jquery plugin "jquery.maphilight.js". Using that I have a mapped Image and it highlights over the mapped portion if I mouse hover on image. How can I display a small picture and paragraph if a person hovers his mouse on a specific room (mapped portion).

这里是javascript：

Here is the javascript:

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

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

&这是映像映射的HTML：

& This is the html of image mapping:

<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鼠标悬停事件。

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

您可以执行的通用处理程序：

for a generic handler you could do:

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

这篇关于如何通过鼠标悬停在另一个映射的图像区域显示小图像和段落？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！