初心者です。クリッカブルマップonclickの後

質問

javascript初心者です。

クリッカブルマップにおいて指定area内をクリックすると
画像が差し替えになる状態です。

差し替え後の画像はarea範囲よりも大きい（マップ全体と同一サイズ）なのですが
このarea座標外でクリックして、元画像に戻るようにしたいです。

現在は、area座標内をクリックしないと元画像に戻りません。

■jabascript

function circle01_over(){
var objElement = document.getElementById( '元画像マップ' );
objElement.src = 'ロールオーバー後の画像（元画像と同じサイズで一部だけ変えたもの）';
}

function image_out(){
var objElement = document.getElementById( '元画像マップ' );
objElement.src = '元画像マップ';
}

function circle01_click(){
var objElement = document.getElementById( '元画像マップ' );
objElement.src = 'クリック後の画像';
}

■html

<img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" />
<map name="Map" id="Map">
<area shape="circle" coords="***,***,***" href="javascript:void（0）;" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" />

初歩的な事で申し訳ありません・・・
尚、jQueryも新規リンク（html）も使用不可です。
添付画像のように動作させたいです。
宜しくお願い致します。

回答No.2

fujillin · ベストアンサー

ANo1です。

＞クリック後の画像上で元areaの範囲内をさわったりすると
＞画像が元areaのロールオーバー時のものが表示されてしまうんです
ホットスポットも含めて違う画像に変わるのでしたら、クリッカブルマップを2セット用意しておいて、それを入替えたほうがわかり易いでしょう。
現状のように同じ画像要素を用いて、参照するマップを入替えてもよいですが、上記のほうがわかりやすいかと。

お礼

御礼が遅くなってしまい申し訳ありません。
やはりクリッカブルマップ２枚だてが良さそうですね。
もう少し勉強して、進めたいと思います。ありがとうございました。

回答No.1

fujillin

＞このarea座標外でクリックして、元画像に戻るようにしたいです。
添付図で見ると別のareaのようですので、別にareaを定義して、同様の仕組みで画像を元に戻すようにすれば解決すると思いますが…？

お礼

ご回答ありがとうございます。

別areaの指定は設定できるのですが、元areaの設定が生きたままなので
クリック後の画像上で元areaの範囲内をさわったりすると
画像が元areaのロールオーバー時のものが表示されてしまうんです。

クリック後の画像は、元areaの範囲をオーバーしたサイズなので
一度クリックするとどこが元areaの範囲かは認識できなくなります。

この元areaの設定内で、別areaの指示もできればと思ったのですが・・・
クリック回数を指定するなどするしかなさそうですね。

お忙しい中、ありがとうございました。