formのsubmitボタンを画像にして、オンマウスで画像を切り替えたい。
HTMLとCSSでHP制作しています。
formのsubmitボタンを自作のボタン画像に変えて、ボタンにマウスを乗せると
画像の色を変えるという事をやりたいと思っています。
例えば赤ボタンをオンマウスで青ボタンにするという感じです。
ネット検索してボタンを画像に変える事は出来ました。
ですが、オンマウスで画像を切り替えるやりかたがよくわかりません。
javascriptを使ったものを見かけたように思うのでこちらで質問してみました。
CSSで普通のリンクボタンの画像切り替えは出来るのですが、
formではそういうわけにはいかないのでしょうか?
javascriptがよくわかならいのですが、そんな私にも出来るでしょうか?
どこか参考サイトがありましたら、紹介して頂けるとありがたいです。
アドバイスよろしくお願い致します。
No.1ベストアンサー
- 回答日時:
>submitボタンを自作のボタン画像に変えて
どうやったかによりますが、type="image"を使うならこんな感じで
<form>
<input type="text" name="hoge" value="fuga">
<input type="image" src="1.jpg" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">
</form>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- VR・AR YoutubeでVRゴーグル用の切り替えボタンが表示されない? VRゴーグル(中にスマホを入れるタイ 3 2022/10/20 10:27
- Word(ワード) マイクロソフト2019の本を買ったのですが、本の説明では画面右下に表示モードの切り替えができて閲覧モ 5 2023/02/26 18:16
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(パソコン・周辺機器) X6 ブルートゥースレシーバー(画像あり) の、使い方を教えてください。 ボタンは、ペアリング時のボ 5 2023/04/19 19:11
- その他(データベース) Q&Aフォームを作成したいのですが、どう設計してよいか分かりません、アドバイスお願い致します。 1 2023/07/27 19:04
- Android(アンドロイド) GooglePixel6aで写真が勝手に消えた 5 2023/04/05 15:48
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitするとなぜか2度実行する
-
VBScript
-
フォーム内で記入したクエリ送...
-
javascriptで移動ボタンを押し...
-
confirm()で表示したダイアログ...
-
HTAで、こんなボタンが作りたい。
-
ボタン2回押しを無効にしたい
-
送信フォームで送信ボタンをお...
-
submitボタンの無効化処理について
-
jsで質問です。 ボタンが二つ存...
-
onclickで2個指定するには?
-
sessionの値でボタンを活性・非...
-
onClick="this.form.submit
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
プルダウン 項目が多いので先頭...
-
onchangeイベントを強制的に発...
-
Googleモバイル検索の検索結果...
-
至急!GetElementById でtdの...
-
一度しか押せないボタンについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フォーム内で記入したクエリ送...
-
VBSでブラウザ上のテキストボッ...
-
ボタン2回押しを無効にしたい
-
ボタンを押すとチェックボック...
-
<form action="#">の意味とは?
-
confirmのOK・キャンセルを押し...
-
jsで質問です。 ボタンが二つ存...
-
submitするとなぜか2度実行する
-
onclickで2個指定するには?
-
sessionの値でボタンを活性・非...
-
onClick="this.form.submit
-
【掲示板の機能】投稿時にサイ...
-
メッセージボックスで「はい」...
-
一つのページで二つのFormを別...
-
VBScript
-
Javascriptで二重送信を防止し...
-
確認ダイアログの出し方(JavaS...
-
ホームページビルダーでメール...
-
HTAで、こんなボタンが作りたい。
-
送信フォームで送信ボタンをお...
おすすめ情報