![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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)も使用不可です。
添付画像のように動作させたいです。
宜しくお願い致します。
![「初心者です。クリッカブルマップoncli」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/2/1193646_5497c59c386ef/M.jpg)
No.2ベストアンサー
- 回答日時:
ANo1です。
>クリック後の画像上で元areaの範囲内をさわったりすると
>画像が元areaのロールオーバー時のものが表示されてしまうんです
ホットスポットも含めて違う画像に変わるのでしたら、クリッカブルマップを2セット用意しておいて、それを入替えたほうがわかり易いでしょう。
現状のように同じ画像要素を用いて、参照するマップを入替えてもよいですが、上記のほうがわかりやすいかと。
御礼が遅くなってしまい申し訳ありません。
やはりクリッカブルマップ2枚だてが良さそうですね。
もう少し勉強して、進めたいと思います。ありがとうございました。
No.1
- 回答日時:
>このarea座標外でクリックして、元画像に戻るようにしたいです。
添付図で見ると別のareaのようですので、別にareaを定義して、同様の仕組みで画像を元に戻すようにすれば解決すると思いますが…?
ご回答ありがとうございます。
別areaの指定は設定できるのですが、元areaの設定が生きたままなので
クリック後の画像上で元areaの範囲内をさわったりすると
画像が元areaのロールオーバー時のものが表示されてしまうんです。
クリック後の画像は、元areaの範囲をオーバーしたサイズなので
一度クリックするとどこが元areaの範囲かは認識できなくなります。
この元areaの設定内で、別areaの指示もできればと思ったのですが・・・
クリック回数を指定するなどするしかなさそうですね。
お忙しい中、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
1枚の画像をクリックして複数の...
-
Javascript で共通の処理をどこ...
-
画像の重なりの順序を代える方...
-
画像を切り替えランダム表示
-
画像のランダム表示、及び画像...
-
ランダム表示された画像にリン...
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
c++std::string型をTCHARに変換...
-
jQueryでのドラッグアンドドロ...
-
MFCで画像を表示させているので...
-
createElementで作成した要素を...
-
フッター上部に謎の隙間
-
jspでcssが読み込めない
-
どの<li><a> が押されたか判別...
-
スクロール可能なチェックボックス
-
読み込んだQRコードをフォーム...
-
jQueryで特定id以外の下にある...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報