3

私はhtml5キャンバスに画像を置いています。

myString = '<img id="img1" class="link1" src = 'img/icon1.png'></img>';
            $('#main1' ).append(myString);
            $('#main1' + '-link1').fadeIn('slow'); 

            $(".link1").click(function () {
                window.location.href = url1;
            });

$(".link1").hover(function () {
                $('#myDiv').show();
            }, function () {
                $('#myDiv').hide();
            });

divは次のとおりです。

<div id="myDiv" style="display:none;border: 1px solid black;width: 10px;height:5px;padding: 1px;">
    <p>Hello</p>
</div>

これで、マウスをホバーすると、ページの最後に div が表示されます。画像のすぐ下に表示する必要があります。どうすればそれを達成できますか？

4

4 に答える 4

4

それは、「myDiv」div の配置によって異なります。

<img title="my tooltip text" />ツールチップのテキストだけの場合は、を使用できます。

于 2012-09-19T06:44:56.510 に答える
2

イベント オブジェクトの pageX 、 pageY を使用して、画像の下に div を配置できます。

このリンクを試して、ソリューション http://jsfiddle.net/ZpGS3/14/を取得してください。

于 2012-09-19T06:56:06.300 に答える
1

TipTipと呼ばれるjQueryプラグインを試すことができます。

http://code.drewwilson.com/entry/tiptip-jquery-plugin

あなたはそれが非常に使いやすく、デザインが非常に素晴らしいことがわかるでしょう:)。

リンクにアクセスして、気に入ったかどうかを確認してみてください。

あなたの例を考えると、TipTipのツールチップを表示するには、次のことを行う必要があります。

  • TipTipのCSSおよびJSファイル参照を含める
  • いくつかのJSを入れてください：$("#img1").tipTip();
  • ツールチップのコンテンツをtitle画像のオプション内に配置します。

例えば：<img id="img1" title="<p>Hello</p>"/>

于 2012-09-19T06:46:32.813 に答える
1

マウスオーバーでツールチップを適用するには、使用する必要があります

$('#img1').mouseover(function(){
$(this).attr('title','MY Image Title');
});
于 2012-09-19T06:52:05.223 に答える