使ったものを早速覚書。

jQuery Simple Tooltip

JQueryを使用するｊｓなので、まずはここでゲット。
それからjQuery Simple Tooltipへいってダウンロード。

あとは実行用のJavascriptをhead内へ差し込んで、こちらで用意されている効果をいくつか組み合わせてみる。
HTML内はこうなるかな

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simpletooltip.js"></script>
<script>
$(function(){
$("#Map area").simpletooltip( { click: true, showEffect: "fadeIn", hideEffect: "fadeOut" } );
});
</script>

上記サンプルは
「クリックしたらフェードインで表示。マウスアウトでフェードアウト」です。
$の後ろの括弧内は、イメージマップのIDと「area」タグに対してToolTipを出したかったので、その指定です。
例えば「a」タグ全体なら

$(“a”).simpletooltip

でOK。
あとは実際表示するものをHTML内何処かに書いて（ｊｓで消してくれているから、基本どこに書いても見えない）、
そのブロックに対してCSSを組んでやれば、効果は狭いけど、充分かっこよくなります。

タグ:Coding, imagemap, JQuery, prudown, tooltip, イメージマップ