如何使用jquery地图？

Question

我正在尝试制作jquery图像映射。每个标记/引脚悬停时会出现细节吗？这是我希望得到的屏幕。

https://catalin.red/dist/uploads/2011/10/image-map-with-css3-jquery-tooltips-demo.html

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://wpnature.com/wp-content/uploads/2016/09/waterfall-waterfalls-green-lake-trees-wallpaper-for-smartphone.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="fdgfh" title="fdgfh" href="test.com" coords="379,384,72" shape="circle">
    <area target="" alt="anothyer tooltip" title="anothyer tooltip" href="tets2.com" coords="1010,196,86" shape="circle">
</map>

我已经尝试了图像地图生成器，但我没有得到实际结果，所以有什么方法可以做到这一点。

结果应该是这样的：

Answer 1

这个具体示例有一个完整的演练和解释，可以找到here。

见下面的工作代码：

$(document).ready(function() {

    // set the wrapper width and height to match the img size
    $('#wrapper').css({
      'width':$('#wrapper img').width(),
      'height':$('#wrapper img').height()
    })

    //tooltip direction
    var tooltipDirection;
                 
    for (i=0; i<$(".pin").length; i++) {     

        // set tooltip direction type - up or down             
        if ($(".pin").eq(i).hasClass('pin-down')) {
            tooltipDirection = 'tooltip-down';
        } else {
            tooltipDirection = 'tooltip-up';
        }

        // append the tooltip
        $("#wrapper").append("\
            <div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
                <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
            </div>\
        ");
    }    

    // show/hide the tooltip
    $('.tooltip-up, .tooltip-down').mouseenter(function(){
        $(this).children('.tooltip').fadeIn(100);
    }).mouseleave(function(){
        $(this).children('.tooltip').fadeOut(100);
    })
});

/* Relative positioning*/
#wrapper {
    position: relative;
    margin: 50px auto 20px auto;
    border: 1px solid #fafafa;
    box-shadow: 0 3px 3px rgba(0,0,0,.5);
}

/* Hide the original tooltips contents */
.pin {
    display: none;
}

/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
    position: absolute;
    background: url("https://catalin.red/dist/uploads/2011/10/arrow-up-down.png");
    width: 36px;
    height: 52px;
}

.tooltip-down {
    background-position: 0 -52px;
}

.tooltip {
    display: none;
    width: 200px;
    cursor: help;
    text-shadow: 0 1px 0 #fff;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 999;
    margin-left: -115px;
    padding:15px;
    color: #222;
    border-radius: 5px;
    box-shadow: 0 3px 0 rgba(0,0,0,.7);
    background: #fff1d3;
    background: linear-gradient(top, #fff1d3, #ffdb90);         
}

.tooltip::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-bottom: 10px solid #fff1d3;
    border-left: 10px solid transparent;
    border-right :10px solid transparent;
}

.tooltip-down .tooltip {
    bottom: 12px;
    top: auto;
}

.tooltip-down .tooltip::after {
    bottom: -10px;
    top: auto;
    border-bottom: 0;
    border-top: 10px solid #ffdb90;
}

.tooltip h2 {
    font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
    margin: 0 0 10px;
}

.tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
}  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
   <img width="920" height="450" src="https://catalin.red/dist/uploads/2011/10/world-map.jpg" alt="World continents">   
   <div class="pin pin-down" data-xpos="450" data-ypos="110">     
      <h2>Europe</h2>     
      <ul>
        <li><b>Area (km²):</b> 10,180,000</li>
        <li><b>Population:</b> 731,000,000 </li>
      </ul>
   </div>
</div>