クリッカブルマップで切り替えた先の画像に部分リンク

質問

javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。（下記コード）
イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。

この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。
詳しい方、教えてください。

<script type="text/javascript">

function button1_over(){
var objElement = document.getElementById( 'map' );
objElement.src = '画像1';
}

function button2_over(){
var objElement = document.getElementById( 'map' );
objElement.src = '画像2';
}

function button3_over(){
var objElement = document.getElementById( 'map' );
objElement.src = '画像3';
}

<figure>
<img src="元画像" alt="○" usemap="#image_map" id="map" />
<map id="image_map" name="image_map">
<area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="～～～" />
<area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="～～～" />
　　 <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="～～～" />
</map>
</figure>

回答No.1

fujillin · ベストアンサー

＞切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップ
＞を設定しリンクを貼りたいのですが、方法がわかりません。
画像を入れ替えているだけなので、クリッカブルマップの仕組み自体はそのまま有効なのですが、画像ごとにボタンエリア以外にもエリアを追加設定したいのか、画像を入替えたところでボタンは消えてしまうのかが良くわかりません。（現状だとボタンの表示は消えても、クリッカブルマップは生きているはず）

よくわかりませんが、ひとつの方法としては、画像切替と同時にusemap属性の参照先も替えてあげれば異なるマップを参照することが可能なはずです。
もしも、ボタンは常に表示されているのなら、それは画像とは切り離した仕組みで表示＆制御するようにしたほうがよさそうに感じます。
（通常のメニューのようなつくりにするか、表示位置がバラバラならposition:absoluteで位置を指定するとか）
あとはご質問と同様にマップ画像や参照先を切替えてあげればよろしいかと。

あるいは、ボタンに応じて異なるクリッカブルマップが表示されるようにしたいのであれば、画像を切り替えるのではなく、クリッカブルマップそのものを複数用意しておいて、それぞれのボタンに対応するマップを表示するようにしたほうがわかり易いのではないでしょうか。（他のマップは非表示）

お礼

ボタンとマップを別々の画像にすることで、希望通りの動きをするようになりました！
ありがとうございました。

補足

>画像ごとにボタンエリア以外にもエリアを追加設定したい
こういうことです！説明が下手ですいません。
ボタンは常に表示されています。

ということは、ボタンとエリアを一枚の画像で切り替えようとするより、ボタンとエリアをバラバラの画像にして、ボタンにオンマウスしたらエリア画像がそれぞれのクリッカブルマッに切り替わるようにした方がいい、ということですね。

その方向で考えてみます。
javaスクリプトはちんぷんかんぷんなので、また質問させてもらいます！