1

JavaScript と jQuery を使用して、HTML テキストにマウスを合わせると画像がポップアップするようにします。複数の行があり、各行は異なる画像をポップアップする必要があります。実際のポップアップ ウィンドウという意味ではなく、画像が画面に飛び出したり、爆発したりするだけです。

したがって、私のhtmlコードが次のようになっている場合:

<p id="item1">item1 text</p>
<p id="item2">item2 text</p>
<p id="item3">item3 text</p>

HTML ページのテキスト「item1 text」にマウス ポインターを合わせると、「image1」という画像がテキスト上にポップアップ表示されます。また、ポップアップに画像の上にテキストを含めたいと思っています。そのitem1テキストからマウスポインターを離すと、ポップアップが消えるはずです。同様に、「item2 text」にマウスを合わせると、image2 がポップアップするはずです。

JavaScript を使用してこれを行うにはどうすればよいでしょうか? jQuery を使用してより適切に行うにはどうすればよいでしょうか?

私は完全な JavaScript と jQuery の初心者です。知識不足で申し訳ありません。

4

2 に答える 2

0

優れたjQuery プラグイン Powertipを見てみましょう。通常、このようなマウスオーバー / マウスアウト - ブラウザー間の互換性と配置に関しては、ちょっと注意が必要です。

コードは次のようになります

$('#element')
    .data('powertipjq', $('<p>Some text</p><img src="yourImage.png" />'));
    .powerTip({
        placement: 'e',
        mouseOnToPopup: true
    });
于 2012-11-18T23:33:43.927 に答える