クリティカルマップでロールオーバーして、ツールチップを出す。

中心に大きな丸いエリアがあり、その外側に少し小さな丸い形が10個ほど取り囲んでいる。
真ん中の丸と、外側の小さな丸は連携していて、それぞれにマウスをのせると、変化する。
加えて、その連携の説明文を出したいという注文を受けた。
CSSとjQueryを使って、処理をしようと思ったが、2つを連携させるのは意外に面倒だった。

で、あまり時間もないから、シンプルに処理することにした。
クリティカルマップの設定はそのままにして、ロールオーバーの画像はツールチップも含めるした。
後は、JavaScriptでmouseoverとmouseoutで画像を入れ替える記述をする。

ネットで答えは簡単に見つかるようになったが、ちょっと躓いたときは、自分で考える。
シンプルな解決策は、WEBで収拾するより、自分の経験則で見つかることがある。