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ベストアンサー
- 回答日時:
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ランキング
-
スライダーを実装した場合、ペ...
-
lightbox2をiframeから外に表示...
-
javascript keisanとlook
-
画像クリック→メッセージボック...
-
JAVASCRIPTでアクセス毎に画像...
-
画面の表示位置を指定させて表...
-
オンマウスで、画像切り替え+...
-
Gifアニメ、最後のコマに行った...
-
Javascriptで指定した日付と時...
-
画像と説明文を別データで作りたい
-
【java】背景画像を一定時間で...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
htmlの記述で link rel=styles...
-
JQueryで画像の上で文字を動かす
-
ロールオーバー効果にならない。
-
jspでcssが読み込めない
-
離れた場所にマウスオーバーで...
-
フォントサイズの変更
-
変数内容をHTML内で表示する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報