HTML、CSS、Javascriptを勉強中の初心者です。
あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。
あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。
(1)Aがクリックされたら、AをA2に置き換える
(2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる
質問内容は以下です。
(1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。
クリックした状態のままにするには他にどのような処理が必要なのか。
(2)jQuery?でできるような気がするが、サンプルとなるものがなく、書き方がわからない。
(調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした)
上記について、ご回答よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
じゃこんな感じで処理してみてください
<script>
var imgs=[
{"img_id":"a_img","org_img":"a.jpg","new_img":"a2.jpg"}
,{"img_id":"b_img","org_img":"b.jpg","new_img":"b2.jpg"}
,{"img_id":"c_img","org_img":"c.jpg","new_img":"c2.jpg"}
];
function imgchange(t){
for(var i=0;i<imgs.length;i++){
var img=document.getElementById(imgs[i]["img_id"]);
var oImg=imgs[i]["org_img"];
var nImg=imgs[i]["new_img"];
img.src=(t==img)?nImg:oImg;
}
}
</script>
<img src="a.jpg" id="a_img" onclick="imgchange(this)">
<img src="b.jpg" id="b_img" onclick="imgchange(this)">
<img src="c.jpg" id="c_img" onclick="imgchange(this)">
この回答への補足
ご丁寧にありがとうございます。
試してみたのですが、怪しげな挙動をしてしまってます…。
クリック時の処理の他、マウスオーバー時の処理も入れており、それぞれA’、B’、C’という画像を使っています。
上記のスクリプトを実装したところ、クリック時は問題なくA2の画像になったのですが、それと同時にBがB’になりました。
同じようにB(B’で表示されてしまったB)をクリックすると、今度はCがC’に…という具合です。
ちなみに、クリック後にカーソルを外すと、それぞれA、B、Cの元の画像に戻ります。(A2、B2、C2で表示されない)
マウスオーバーのスクリプトは、DWで設定できるMM_swapImgRestore、MM_findObj、MM_swapImage、MM_preloadImagesを使っています。
言葉での説明となってしまい、大変わかりづらく、申し訳ございません…。
No.1
- 回答日時:
いくつか疑問点
→「画像で作成したボタンA」とはimgタグなのですか?
それとも何か別のボタン的な何かなのでしょうか?
→A2をクリックしたときにAに戻す必要はありますか?
→Cをクリックしたときにも同様の処理が必要ですか?
この回答への補足
説明不足で申し訳ございません。
→「画像で作成したボタンA」とはimgタグなのですか?
>imgタグになります。
→A2をクリックしたときにAに戻す必要はありますか?
>A2が表示されている状態でA2をクリックした場合は、A2のままである(Aに戻すことはしない)という想定です。
→Cをクリックしたときにも同様の処理が必要ですか?
>はい。同じようにCがクリックされたらC2を表示、AとBはそのまま、という風にしたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- Windows 10 パソコンの起動時、画面が黒いままのトラブルにつきまして。 4 2022/10/02 18:02
- Chrome(クローム) Webサイトの表示崩れの原因と対策 1 2022/08/01 23:16
- オープンソース AWSドメイン名でApacheテスト・ページを表示させる方法を教えて下さい。 1 2023/04/26 15:59
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/04/21 13:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
複数画像のランダム複数表示(...
-
MFCで画像を表示させているので...
-
error LNK2019 未解決のシンボ...
-
imgボタンにfocusの当て方
-
jQueryで、画像クリック→フェー...
-
OpenCV での画素値の比較について
-
jQuery 複数のfind()
-
セクトボックスの連携の仕方。
-
以下のタグはクリックすると画...
-
画像処理 C言語 元画像の幅...
-
Javaの正規表現でimgタグのalt...
-
画像が表示でnull; this.src
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
Slick.jsのオプションrtlについて
-
どの<li><a> が押されたか判別...
-
クリックで色変更後に既に変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
Vb.net2005での画像の合成方法
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
(javascript)HTMLで指定した...
-
【OpenCV】二値画像後、白の部...
-
jQuery 複数のfind()
-
ラズパイでno module named zbar
-
外部javascriptの重複を防ぐには
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
OpenCV での画素値の比較について
-
imgボタンにfocusの当て方
-
指定したフォルダの画像を一括...
-
OpenCVでサンプルコードを使う...
おすすめ情報