9

画像があり、その上にロゴ (地図) があります。ユーザーがマウスをロゴの上に移動したときに、そのロゴの場所に関する情報を含む小さなボックス ポップアップが必要です。

JavaScriptフレームワークを使用せずにこれを行うことはできますか?もしそうなら、そのようなことを可能にする小さなライブラリ/スクリプトはありますか?

4

7 に答える 7

9

はい、Javascript なしでこれを行うことができます。次のように、タイトル属性を含む HTML イメージ マップを使用します。

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>

Stack Overflow のロゴはイメージ マップareaを参照しており、タグを使用して 2 つの単語のそれぞれに四角形を定義しています。各areaタグのtitle要素は、ブラウザーが通常ツールチップとして表示するテキストを指定します。このshape属性は、円または多角形を指定することもできます。

于 2008-08-24T18:24:07.343 に答える
7

このtitle属性は最も単純な解決策であり、動作することが保証されており、正しくサポートされていないユーザー エージェントに対して適切に機能を低下させます。

于 2008-08-24T17:27:44.237 に答える
5

単一の画像だけでは、ブラウザーにロゴのセマンティック情報は提供されません。イメージ マップを使用して座標を指定できます。titleツールチップを実現するには、各リンクに属性を適用するだけです。より洗練されたツールチップ (スタイリング、複数行など) については、UniTipなどの非標準のものが必要になります。

于 2008-08-24T16:35:42.737 に答える
4

MooTools には、このための気の利いたスクリプトがあります。MooTools のヒントを参照してください。HTMLでも軽量。

これは 1.11 バージョンのデモです。

于 2008-08-24T16:40:08.670 に答える
3

実際、mootools は、Web ページの
任意の要素に機能を追加できる多くのフレームワークの 1 つです
。ここに小さなチュートリアルへのリンクがあります。
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools は、実際にはコピー アンド ペースト タイプのフレームワークではありません。
提供されているコードに目を通し、
いくつかの優れた例を使用して独自のソリューションを開発することをお勧めします。

于 2008-10-06T09:10:09.870 に答える
2

http://www.taggify.net/で JavaScript ウィジェットを試すことができます。スクリプトを使用すると、画像の一部にツールチップを追加できます。ユーザーが写真上の領域にマウスを移動すると、スクリプトがツールチップをポップアップ表示し、領域の周りに境界線を描画し、他の部分をフェードします。写真に人をマークするためのクールなもの。http://www.taggify.net/demo.aspxでデモを参照してください。

于 2009-03-12T16:11:57.297 に答える
1

title簡単なツールチップに属性を使用できます。ほぼすべての DOM オブジェクトで機能します。

于 2015-09-01T12:41:01.287 に答える