タグ

Tipsとtooltipに関するnaohorのブックマーク (3)

  • [jQuery]イメージマップでTooltip表示するサンプル

    「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない?」って言われて書いたやつ。 非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。 jQuery1.2.6用。 jQueryのマウスイベントには以下プロパティ提供されていて pageX/Y : ページの左上を0としたマウスポインタの位置 clientX/Y : ブラウザのドキュメント表示領域を0としたマウスポインタの位置 特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。 <div id="imgmap"> <img src="tags.png" alt="Tags" width="400" height="151" border="0" usemap="#Map" /> <map name="Map" id="Map"><area

  • [JS]これ最強かものツールチップスクリプト -BeautyTips

    シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で

  • FirefoxでTITLE属性のツールチップ内改行を有効にしたい

    さて趣味でプログラミングをしているわけですが最近は専らPHPのそれにかかりきりです(1.4.0がリリース間近ということもあり)。でも,たまにはJavaScriptのスクリプトも書いてみたくなります。 IMGタグにはALT属性がありますが,これは画像の代替テキストの役目を果たします。XHTMLでは必須の項目です。このALT属性なんですが,ホームページ作りに励んでいる方々はお気付きかもしれませんが,インターネットエクスプローラー(IE)とFirefoxでは,挙動が違います。IEでは,画像にALT属性があるとマウスのカーソルを重ねたときに,ツールチップ(バルーンヘルプ)が表示されます。でも,Forefoxでは何も表示されません。これはFirefoxのバグというわけではなくて,単にブラウザ間の実装(解釈)の違いに基づくものです。じゃ,Firefoxでもツールチップを出すにはどうしたらいいかというと

  • 1