[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
jQueryでロールオーバー！プリロード対応版 (1/3)
ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある（画像クリックでサンプルページを表示します） ロールオーバーの基本的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像（img要素）の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML／XHTML（以下、HTML）は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白（すき間）を防ぐためです。コメントを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
