イメージ上のツールチップ

Question

イメージがあり、その上にロゴ（マップ）が表示されています。ロゴの上にマウスを移動すると、そのロゴの位置に関する情報を小さなボックスのポップアップに表示します。

javascriptフレームワークを使用せずにこれを行うことはできますか？その場合、私にそのようなことをさせる小さなライブラリ/スクリプトはありますか？

Answer 1

はい、これは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> 

ザスタックオーバーフローのロゴareaタグを使用して、2つの単語のそれぞれのための矩形を定義し、image mapを指します。各areaタグのtitle要素は、ブラウザが一般的にツールチップとして表示するテキストを指定します。 shape属性は、円または多角形を指定することもできます。実際

Answer 2

単独の画像だけでは、ブラウザ内のロゴに関する意味情報がブラウザに与えられません。あなたは座標を供給するためにimage mapを使うことができます。ツールチップを実現するには、各リンクにtitle属性を適用するだけです。より洗練されたツールチップ（スタイリング、複数行など）の場合は、UniTipなどの非標準のものが必要です。

Answer 3

MooToolsにはこのための素晴らしいスクリプトがあります。 MooTools Tipsを参照してください。 HTML上でも軽量です。

1.11バージョンのdemoです。

Answer 4

title属性は最も簡単な解決策であり、正常に機能しないユーザーエージェントの場合はとが正常に機能しなくなります。

Answer 5

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

MooToolsは、それが供給された符号と
ロールいくつかの優れた例を使用して独自のソリューションに目を通すためにあなたを奨励し、実際にフレームワークのコピー・ペーストタイプではありません
。

Answer 6

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

Answer 7

あなたは簡単なツールチップのtitle属性を使用することができます。ほぼすべてのDOMオブジェクトで動作します。