Question

我在jquery工具提示中遇到问题。我有单个图像，我用坐标划分为五个矩形部分。我的工具提示正在运行，但我没有在我想要的位置获得工具提示。所有工具提示都显示在同一位置。

这是我单个图像上多个工具提示的html代码。在未显示任何工具提示的Firefox或Google Chrome中，它会在左上角显示所有工具提示。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ciclo</title>
        <link rel='stylesheet' href='css/tooltips.css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <!--[if !IE | (gt IE 8)]>!-->
        <script src="js/tooltips.js"></script>

        <script>
                $(function() {
                    $("#Map a[title]").tooltips();
                });
        </script>

        <style  type="text/css">
            body{margin:0; padding:0;}
            .ciclo_image{height:600px; width:600px; margin:100px auto}
        </style>

      </head>       
      <body>
        <div class="ciclo_image">
          <img src="img/ciclo2.jpg" width="600" height="600" border="0" usemap="#Map" />
          <map name="Map" id="Map">
            <a href="#" title="Market"><area shape="rect" coords="83,91,193,174" href="#" /></a>
            <a href="#" title="Arising"><area shape="rect" coords="333,59,473,153" href="#" /></a>
            <a href="#" title="Reprocessing"><area shape="rect" coords="5,318,141,385" href="#" /></a>
            <a href="#" title="Collection"><area shape="rect" coords="480,302,578,373" href="#" /></a>      
            <a href="#" title="Shorting and Trading"><area shape="rect" coords="227,491,379,555" href="#" /></a>
          </map>
        </div>
      </body>
     </html>

Answer 1

在地图上，href属性位于区域标记

中

如果要显示这些工具提示，首先需要为它们提供显示值。这只适用于opera和chrome / safari（就我测试过的窗口而言）

关于dabblet的示例：http://dabblet.com/gist/5586117您会看到地图和区域是否从浏览器设置为另一个。

使用坐标进行绝对定位可以使其正常工作。

我相信你应该用div和链接制作你的地图，绝对位置以图像为背景。

Answer 2

我创建了一个fiddle。您需要在页面中添加jquery.ui.js。

在将工具提示应用于HTML元素时使用自定义代码。

    $(function() {    
              $( 'document' ).tooltip({      
                            position: {        
                                    my: "center bottom-20",        
                                    at: "center top",
                                    using: function( position, feedback )
                                               { 
                                                    $( this ).css( position );         
                                                    $( "<div>" ).addClass( "arrow" )
                                                      .addClass( feedback.vertical )
                                                      .addClass( feedback.horizontal )
                                                      .appendTo( this );        
                                                }      
                                       }    
               });  
 });

您可以根据需要更改工具提示的样式。您还可以选择要应用工具提示的特定选择器。我使用'document'作为选择器。

Answer 3

尝试使用此标记

   <area title="Market" shape="rect" coords="83,91,193,174" href="#" />
   <area title="Arising" shape="rect" coords="333,59,473,153" href="#" />
   <area title="Reprocessing" shape="rect" coords="5,318,141,385" href="#" />
   <area title="Collection" shape="rect" coords="480,302,578,373" href="#" />  
   <area title="Shorting shape="rect" coords="227,491,379,555" href="#" />

我认为功能上的一些问题也是

工具提示不是工具提示

   <script>
            $(function() {
                $("#Map area[title]").tooltip();
            });
    </script>

单个图像上的HTML多工具提示在任何浏览器上都无法正常工作

3 个答案: