0

jquery ツールチップで問題に直面しています。座標で5つの長方形部分に分割した単一の画像があります。ツールチップは機能していますが、必要な位置にツールチップが表示されません。すべてのツールチップが同じ場所に表示されます。

これは、単一の画像に複数のツールチップを表示するための私の 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

フィドルを作成しました。ページに 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 に答える
0

マップでは、href 属性は area タグに含まれます

これらのツール ヒントを表示する場合は、最初に表示値を指定する必要があります。これは Opera と chrome/safari (私がテストした限りでは Windows) でのみ動作します。

dabblet の例: http://dabblet.com/gist/5586117ブラウザーから別のブラウザーへのマップとエリアのスタイルが表示されます。

座標を使用した絶対配置により、機能します。

画像を背景として絶対位置に div とリンクを使用してマップを作成する必要があると思います。

于 2013-06-14T08:53:27.090 に答える