ボタンをクリックした感じの画像を設定する方法

2023/10/28 11:31

このQ&Aのポイント

HTMLページにボタンをクリックした感じの画像を設定する方法について説明します。
クリックしたときに画像を変える方法として、JavaScriptを使用して画像のsrc属性を変更する方法があります。
具体的なコード例として、<img>タグにonClickイベントを追加し、クリックしたときに画像のsrc属性を変更するJavaScript関数を記述します。

ベストアンサー

ボタンをクリックした感じの画像を設定する

2013/11/12 16:20

htmlページに、作成した画像を配置し、リンクを貼っています。画像の上にカーソルを合わせたときに画像を変えることはできたのですが、クリックしたときに画像を変える方法が分かりません。クリックしたときに押した感じを表現したいです。どのようにコードを書けばいいですか？ご教授お願いいたします！ちなみにオンマウス時に画像を変化させるため以下のようなコードを書いています。 <img src="./images/logo.jpg" onmouseover="this.src='./images/logo_on.jpg'" onmouseout="this.src='./images/logo.jpg'" alt="お問い合せはこちら" /></a> よろしくお願いいたします！

masunona
お礼率93% (244/261)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

play_with_you
ベストアンサー率37% (112/301)

2013/11/12 16:43 回答No.1

「押した感じを表現」するには「押した感じ」の画像を用意しないといけません。コードでどうこうじゃない。ちなみに、画像を用意したらonmousedownで換えればいいと思います。

質問者

お礼 2013/11/12 16:51

ありがとうございます！質問が下手ですみません。画像は用意しております。 onmousedownでできました！早急にお答えいただき大変助かりました。ありがとうございました！

関連するQ&A

オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。どれを使っていいか分からず困っています。これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
クリックした自身の画像を別画像に入れ替えて表示
前回質問したときに、解決したと思いましたが、動きがおかしいので再質問します。メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。下記のコードだと、クリック時、a_press.gif'は表示されず何も表示されていない状態（背景画像）が見えてしまいます。 a_press.gif'<a href="http://www.yahoo.com/"> <img src="images/a_on.gif" onmouseover="this.src='images/a_rollover.gif';" onmouseout="this.src='images/a_on.gif';" onclick="this.src='images/a_press.gif'; this.onmouseover=null; this.onmouseout=null;"> </a> どなたかご教示いただけないでしょうか？　よろしくお願いします。 IE,Firefox対応希望。
- 締切済み
- JavaScript
オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
画像が変わりません；教えて下さい！
質問させて頂きます。お知恵をお貸し下さい。ウェブサイトを作っていて、「画像にオンマウスで別の画像を表示、クリックでリンク先に飛ぶ」というのをやりたかったのです。しかし、画像1は表示され、リンク先にも飛ぶのですが、オンマウスしても画像2が表示されません；何が原因でしょうか？以下のようにしているのですが… <a href="リンク先のURL"> <img src="img/画像1.gif" onmouseover="this.src='img/画像2.gif'; " onmouseout="this.src='img/画像1.gif';" border="0"> </a> 初心者なものですみません。カテゴリ選択もここで良いのでしょうか…；ご存知の方、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
java スライド　クリック　メニューについて
左右に矢印画像がありクリックでサムネイルが移動するようなスクリプトにしたいです。すみません、以下のようなスクリプトでサムネイル画像を横スクロールさせています。実際にはスクロールではなく、一度に画像が配列されarrow_lをクリックすれば左にarrow_rをクリックすれば右に画像が移動するというようなサムネイル画像を作りたいのですが、以下のソースからどのようにすれば良いでしょうか？また参照できるサイトがあればお教えいただきたく思っております。何卒宜しくお願いします。 <input type="image" src="img/arrow_l.gif" id="左" onclick="hs.direction='left'" value="←" /> <marquee id="hs" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()"> <img src="images/sum-bw2.jpg" alt="bw" hspace="2" border="0" /> <img src="images/sum-ex2.jpg" alt="bw" hspace="2" id="bw" /> <img src="images/sum-sh2.jpg" alt="bw" hspace="2" id="bw2" /> </marquee> <input type="image" src="img/arrow_r.gif" onclick="hs.direction='right'" value="→" />
- 締切済み
- JavaScript
【スマホ】画像ボタンを押したときに押した感を出す
こんにちは。質問があります。ボタンをCSSではなく画像で作成して、押す前画像→押された画像→押す前画像→ＵＲＬへ飛ぶという表現をHTMLにて記述したいと思います。 ■例1 <a href="javascript:void(0);"><img alt="button" src="001.jpg" class="img" onmousedown="this.src='002.jpg';" onmouseup="this.src='001.jpg';"></a> ■例２ <img src="1.jpg" onmousedown="this.src='2.jpg'" onmouseup="this.src='1.jpg'" onmouseout="this.src='1.jpg'"> 上記のようにＰＣ用設定は見つけたのですがこれをスマホで見てもちゃんと動作してくれません。スマホ用の記述を教えていただきたいです。できればiPhone、Android両方で使える記述だとありがたいです。よろしくお願いします。
- 締切済み
- iPhone・iPad・iOS
cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
onmouseoverとoutで画像を切り替えられた・・・けど、何だろう青い枠線；
お世話になります。ビルダー１１で作成中です。 onmouseover時とonmouseout時に画像を入れ替える処理を入れました。参考サイトさんを利用して、以下のようなソースです。 <img src="画像.jpg" alt="がぞう" onmouseover="this .src=画像２.jpg';" onmouseout="this .src='画像.jpg';"> でも、上記ソースだと、プレビュー画面で画像の回りに青い枠線が常時表示されるようになってしまいました（！）ビルダー内蔵のJavaScriptで_HpbImgSwap関数があって、それを利用していたときはそんなことにはならなかったのですが・・・。ちなみに、「じゃあ、そっち使えばいいじゃん」とおっしゃる意見も出ると思うのですが、そちらを利用すると、なんかONMOUSEのときに、画像が凹む？のです。それはちょっと都合が悪い、ということで、上記ソースでできるならば、と思いました。青い枠線を非表示にするには、どうしたらよいでしょうか？ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ よろしくご教示ください。<(_ _)>
- ベストアンサー
- HTML
changeImgによる画像の入れ替え時のIEにおける不安定さ
changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。何処がおかしいのでしょうか？どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですがそれぞれの画像をオンマウスしたときに違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript