コニファ・ロゴ

csstest:Querプラグインjquery.tooltip.jsを使って、多機能なツールチップ(tooltip)を実装(2)

多機能なtooltipを実装してくるjQueryプラグインのjquery.tooltip.jsですが、画像のイメージマップを利用したtooltipも可能です。このサンプルでは、area要素のtitleに県名、hrefにデータを入れています。本来、hrefにはURLを入れるものですが、"#"を先頭にした全国順位、人口、総人口に占める割合にしていて、これらが、各エリアにonmouseするとtooltipとして表示されます。クリックしても移動しません。

→ jquery.tooltip.jsを使って、多機能なツールチップ(tooltip)を実装(1)へ

(1)と同様に、このページのtooltipをブロックして、無効にすることができます。

 tooltip:有効  tooltip:無効

(サンプル6)イメージマップのtooltip

関東(一都六県)+山梨県の人口(平成23年10月1日・総務省統計局データから)
各エリアの県名付近にマウスカーソルをのせてください。
県名全国順位人口総人口に占める割合を表示します。
【追記】小さい画面では機能しないブラウザがあるようです。

神奈川県 東京都 山梨県 埼玉県 千葉県 茨城県 栃木県 群馬県

HTML(areaの一例)

<area title="東京都" shape="rect" coords="95,130,149,150" href="#1 13,196,000人 10.3%
" alt="東京都">

Code

$("map *").tooltip({ positionLeft: true });

 

 

戻るボタン