同一ページ上に複数箇所がロールオーバーする画像２枚を設置

質問

あるページに画像を設置したいのですが、flashで制作する以外に解決方法がわからず、悩んでいます。

例）日本地図があり、九州にマウスを置くと博多●●ラーメン、北海道にマウスを置くと函館●●ラーメンの小さな写真が表示される。クリックしたら該当ページに飛ぶ。
マップのそばにある「カレー」ボタンを押すと、見た目は同じような日本地図だが、マウスを置いた時に東京●●カレー、神戸●●カレーなどが表示される。

つまり
・マップ上の特定箇所にマウスを置くと、ロールオーバーし、クリックすると該当ページに飛ぶ
・特定箇所は、１枚のマップ上に複数個所ある
・ページ内のマップ画像の部分だけが、別のマップ画像に切り替わるようにしたい

flashを使うと費用が高くなり過ぎるので、なんとかその他の方法で先方の要望を満たせないかと思って投稿させてもらいました。いろいろ自分でも調べてはいるのですが、、、何か方法はないものでしょうか？

回答No.1

abacabu

趣味でHP製作をしているものです。
日本地図の画像を使ってクリッカブルマップでやってみては
どうでしょうか？
画像の中にリンクを作る方法です。
例えば画像の北海道のエリアを指定して、そのエリアにリンクを
貼るというものです。これはHTMLで処理できますので
簡単です。

お礼

ご回答ありがとうございます。
しかし、、、
クリッカブルマップ自体は知っているのですが、他に挙げた条件を同時に実現させる方法が、見つけられないんです、、、。

１、http://www.seiai.ed.jp/t2000/htm3/h12a04.html
このように「ラーメンマップ」「カレーマップ」が同じ場所で切り替わり

２、それぞれのマップ上で、名古屋や北海道などにマウスを載せると地域名が反転して関連写真が見える（複数個所ロールオーバー？）

３、反転する箇所をクリックすると、該当ページへ飛ぶ（これがクリッカブルマップですね）

私の質問の書き方が伝わりにくかったかも知れません。
ご回答ありがとうございました！

補足

★今のところ考えている解決方法はこんな感じです、、、
・それぞれのマップ画像をスライスし、必要なイメージのみロールオーバー化＆該当ページへのリンク
・このようなjavascriptでマップを切り替える
​http://www.seiai.ed.jp/t2000/htm3/h12a04.html​
（画像をスライスしたとなると画像点数が複数になるので、画像の切替ではなく、インラインフレームみたいな機能を使う？）

☆問題点
・上記の複数のjavascriptを併存させる方法が分からない
・javascript設定をoffにしているブラウザに対して有効ではない

う～むむ、、、例題は解けても応用問題が解けないのです