• ベストアンサー

input type=imageのマウスオーバーについて

分かる方お助け下さい! input type="image"で表示した画像をマウスオーバーで切り替えることは出来ますか?

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

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

  • ベストアンサー
  • Seravy
  • ベストアンサー率47% (118/249)
回答No.1

やったことはないですが、理論上出来ると思います。 HTML <input type="image" src="ABC.png id="button"> JavaScript側は document.getElementById("button").src = "BBB.png"; って感じの処理で出来るでしょう。 あとはイベントを張って・・。

raoh199907
質問者

お礼

素早い対応ありがとうございました。 Seravy様の回答通りやって見たらうまくいきました。 ありがとうございました。

関連するQ&A

  • input type="image"でマウスクリック画像変更がうまくいかない

    input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML
  • マウスオーバーで画像変更

    フォームを作って送信ボタンを画像にしてる↓んですが、 <form action="http://***" method="POST" name="form" autocomplete="off"> ---略--- <input type="image" src="image/abc.gif" name="login"> </form> その画像をマウスオーバーで他の画像に変えるって技ないでしょか?

  • イメージマップでマウスオーバーするとポップアップ

    いつもお世話になっております。 地図の画像をイメージマップにして、地図の各ポイントをマウスオーバーすると画像が横に出る というものを作りたいのですが、可能でしょうか? 調べたのですが「イメージマップにマウスオーバーで説明文を出す」や 「リンクにマウスオーバーで画像を出す」というものしか見つかりませんでした。 javascriptオフにも対応するためCSSで実現できないかと考えているのですが方法を教えて頂けませんでしょうか? 宜しくお願いいたします。

  • input type=imageでjavascript

    <input type="submit" name="next" onclock="・・・"> を <input type="image" src="image/next.gif" onclick="・・・"> としたいのですが、type="image"がonclick="・・・"を利用できません。 aタグにしようとしたのですが、 <input type="submit" name="next" onclock="・・・"> のようにして、name="next"(フラグ)を飛ばすことができません。 困っているので対処方法を教えていただけるでしょうか? よろしくお願いします。

    • ベストアンサー
    • PHP
  • イメージマップでのマウスオーバー

    イメージマップでのマウスオーバーなのですが、 此方で見ても良く解らなかったので質問させて頂きます。 http://nearlyequal.fc2web.com/m.gifの画像を http://nearlyequal.fc2web.com/m1.gif の様にイメージマップでマウスオーバーを個々の菱形に設定したいのですが、どの様にすれば良いのでしょうか? area shapeの中にonmouseoverで指定してみても上手くいきませんでした。。。 タグ初心者の為、詳しく教えていただければ幸いです。

  • input type="image"の押し方

    スカイマークの予約を自動でしたいのですが、 (1)日にち 行き先を指定する。 (2)便・料金を選択する。 (3)人数を入力する この入力手順なのですが、(3)の入力した後の「次へ」のボタンの押し方がわかりません ソースを見ると <input type="image" name="next" src="/web_rsv/ja/images/next_button.gif" onClick="nextDisplay(nform, nform.btn, this)" > このようになっています。 ご教授願います。 <input type="image" name="next" src="/web_rsv/ja/images/next_button.gif" onClick="nextDisplay(nform, nform.btn, this)" >

  • マウスオーバーで複数の画像を表示したいです。

    マウスオーバーで複数の画像を表示したいです。 マウスオーバーで複数の画像を任意の場所に表示して、 マウスアウトでそれぞれの画像を非表示にしたいです。 やりたい事は ■にマウスオーバーすると□が表示され、□をどれかマウスオーバーしても、□の画像3枚全部とも表示は続いてほしいです。■と□のどれかからマウスアウトすると非表示にしたいのです。 ■ □ □ □ よろしくお願いします。

  • フォームに<INPUT type="image"で画像ボタンをつけたい

    Perl で書いたフォーム要素に画像ボタンを付けたいのですが、画像が表示されません。 次のように、next と prev のボタンに二つの方法で画像を呼び出そうとしましたが。。。 Print <<EOD; <BODY> <FORM method="POST" action="germJ.cgi" name="kdicFORM" target="frame1"> <INPUT type="image" SCR="http://localhost/dic/ArrowMacPrev.GIF"> <INPUT type="image" SCR="/ArrowMacNext.GIF"> ---- </FORM> EOD URL をじかにアクセスするとIE6.0は表示します。 すみませんが、どなたか御教示をお願いします。 さらに、画像が表示された後のこと、つまり「送信」されるデータ(X=nnn, Y=nnn)をどうすればキャッチしてnext/prevの分岐を実現できるか、はつぎの問題なんですが。。  Perl 固有の問題というよりか、javascriptの問題みたいで済みません。

    • ベストアンサー
    • Perl
  • Javascriptのマウスオーバーについて

    Javascriptでマウスオーバーというものがあります。 画像の上にマウスを持っていくと、画像が切り替わるものです。参考:http://www14.plala.or.jp/sugachuu/JavaScript/k06.html そこで、質問なのですが、マウスオーバーのスクリプトを 同じページ内で いくつも表示させるのは可能ですか??(上記参考URLでたとえると、大きな画像1つと小さな画像4つを一まとめにして、一まとめしたものをいくつも同じページ内で表示することは可能ですか??) もし可能なら、そのやり方を教えてください。サンプルソースみたいなのをつけていただくと、うれしいです。 よろしくお願いします。

  • <INPUT type=

    indexのページを上1つ{top}下に左右2つ{side・main}と3つに分割しています。 そのtopの部分に <TD align="right"> <form method="POST" action="cart/shop.cgi"> <input type="hidden" name="mode" value="kakunin"> <input type="hidden" name="ret_id" value="./index.html"> <input type="image" src="cart.gif" alt="かごの中身を見る" border="0"> </TD> この様な形でボタン?を表示させ、それをmainで表示させたいのですが、どうすればいいのでしょうか? 今の状態では当然ですが{top}の部分にそのまま表示します。 あまり知識がなく、いろいろ調べてみたのですがわかりませんでした。よろしくお願いいたします。

    • ベストアンサー
    • HTML