多機能なtooltipを実装してくるjQueryプラグインのjquery.tooltip.jsですが、画像のイメージマップを利用したtooltipも可能です。このサンプルでは、area要素のtitleに県名、hrefにデータを入れています。本来、hrefにはURLを入れるものですが、"#"を先頭にした全国順位、人口、総人口に占める割合にしていて、これらが、各エリアにonmouseするとtooltipとして表示されます。クリックしても移動しません。
→ jquery.tooltip.jsを使って、多機能なツールチップ(tooltip)を実装(1)へ
(1)と同様に、このページのtooltipをブロックして、無効にすることができます。
関東(一都六県)+山梨県の人口(平成23年10月1日・総務省統計局データから)
各エリアの県名付近にマウスカーソルをのせてください。
県名と全国順位、人口、総人口に占める割合を表示します。
【追記】小さい画面では機能しないブラウザがあるようです。
<area title="東京都" shape="rect" coords="95,130,149,150" href="#1 13,196,000人 10.3% " alt="東京都">
$("map *").tooltip({ positionLeft: true });