0

我在 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>
4

3 回答 3

0

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

如果你想显示这些工具提示，你首先需要给它们一个显示值。这仅适用于歌剧和 chrome/safari（据我测试的 windows）

dabblet 上的示例：http://dabblet.com/gist/5586117你会看到从浏览器到另一个浏览器的地图和区域样式。

带坐标的绝对定位使其工作。

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

于 2013-06-14T08:53:27.090 回答
0

我创造了一个小提琴。您需要在页面中添加 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 );        
                                                }      
                                       }    
               });  
 });

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

于 2013-06-14T09:27:03.280 回答
-1

试试这个标记

   <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>
于 2013-06-14T09:41:44.293 回答