1

Qtip を使用したイメージ マップがあり、ツールチップを左目と右目の両方に表示したいのですが、ツールチップが表示されません。

これが私のJSコードです：

$(document).ready(function() 
{
  $('area[alt]').qtip(
  {
     content: {
          attr: 'alt'
     },
     hide: {
          fixed: true,
          delay: 500
     },
     style: {
      classes: 'qtip-tipsy qtip-shadow'
     },
     position: {
      viewport: $(window)
     }
  });
});

HTMLは次のとおりです。

<map name="Koala">
<area alt="Left Eye" shape="rect" coords="373,365,404,402" href="#" />
<area alt="Right Eye" shape="rect" coords="641,405,681,448" href="#" />
<!-- .... more hotspots would be listed here -->
</map>

このコードを試してみると、Qtip がまったく表示されず、その理由がわかりません。

4

1 に答える 1

1

qtipページ http://jsfiddle.net/craga89/v2WPz/で提供されたデモフィドルを見てください

次に、必要な変更を反映するように変更します。これで機能するはずです。

最終バージョンは次のとおりです。

jsfiddle.net/v2WPz/775

<div id="demo-imagemap">
    <h3>United States of America</h3>

    <img border="0" usemap="#statesMap" alt="USA" src="http://www.wallpaperpimper.com/wallpaper/Animal/Koalas/Koala-Bear-Australia-1-1024x768.jpg">
    <map id="statesMap" name="statesMap">
<area alt="Left Eye" shape="rect" coords="373,365,404,402" href="#" />
<area alt="Right Eye" shape="rect" coords="641,405,681,448" href="#" />
    </map>

    <p class="attribution">
        imagemap courtesy of <a href="http://www.americanbanker.com/state/state.html">American Banker</a>
    </p>
</div>

Javascript：

// Create the tooltips only when document ready
$(document).ready(function()
{
    // We'll target all AREA elements with alt tags (Don't target the map element!!!)
    $('area[alt]').qtip(
    {
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
        style: {
            classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
        }
    });
});
于 2013-03-07T17:48:02.940 に答える