<!DOCTYPE html> <html> <head> <title>jquery0Wh皨衏:y - 賨 }Pg</title> <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script> $(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); }) }); </script> <style> /* Relative positioning*/ #wrapper { position: relative; margin: 10px auto 20px auto; } /* Hide the original tooltips contents */ .pin { display: none; } /* Begin styling the tooltips and pins */ .tooltip-up, .tooltip-down { position: absolute; background: url(images/arrow-up-down.png); width: 36px; height: 52px; } .tooltip-down { background-position: 0 -52px; } .tooltip { display: none; width: 200px; cursor: pointer; position: absolute; top: 10px; left: 50%; z-index: 999; margin-left: -115px; padding: 15px; font-size: 16px; line-height: 2; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.3); box-shadow: 0 3px 0 rgba(0,0,0,.3); background: #3389bb; background: -webkit-gradient(linear, left top, left bottom, from(#3389bb), to(#25688f)); background: -webkit-linear-gradient(top, #3389bb, #25688f); background: -moz-linear-gradient(top, #3389bb, #25688f); background: -ms-linear-gradient(top, #3389bb, #25688f); background: -o-linear-gradient(top, #3389bb, #25688f); background: linear-gradient(top, #3389bb, #25688f); } .tooltip::after { content: ''; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-bottom: 10px solid #3389bb; 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 #25688f; } .tooltip h2 { font: bold 18px/2 'microsoft yahei'; margin: 0 0 10px; border-bottom: 2px solid #fff; } .tooltip ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <div id="wrapper"> <img width="1080" height="1174" src="images/world-map.jpg" alt="World continents"> <div class="pin pin-down" data-xpos="700" data-ypos="250"> <h2>NS.U钀</h2> <ul> <li>15030150866</li> </ul> </div> <div class="pin" data-xpos="420" data-ypos="420"> <h2>S.U钀</h2> <ul> <li>15030150866</li> <li>15732198130</li> </ul> </div> <div class="pin pin-down" data-xpos="630" data-ypos="650"> <h2>WSQ.U钀</h2> <ul> <li>15931192097</li> <li>15903316275</li> </ul> </div> <div class="pin" data-xpos="750" data-ypos="600"> <h2>NSN.U钀</h2> <ul> <li>13739707616</li> </ul> </div> <div class="pin pin-down" data-xpos="750" data-ypos="480"> <h2>NS-N.U钀</h2> <ul> <li>15031158390</li> </ul> </div> <div class="pin pin-down" data-xpos="750" data-ypos="340"> <h2>NSS.U钀</h2> <ul> <li>13623113729</li> </ul> </div> </div> </body> </html>