- ベストアンサー
onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- chiiii
- お礼率30% (4/13)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
type=imageを諦めたのは賢明かもしれません。 >指マークにするのって、 ><a>タグで囲うしかないでしょうか？ とりあえずアンカーをつかうならこんな感じで borderを消してやるといいでしょう。 <a href="#" onClick="document.body.className='white';"><img border=0 src="1.jpg"></a> ブラウザによって仕様がことなりますが、 強制的にカーソルを書き換えることもできます。 <img src="1.jpg" onClick="document.body.className='white';" style="cursor:hand;"> IEでは有効ですが、FFとかではダメみたいですね
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
フォームを送信するのが目的でないのならinputをやめて、 <img ～ onclick="～">に変更してはどうですか？ どうしても<input type="image">にする必要があるのなら onclickをやめ、 <form onsubmit="…onclickの内容…;return false;"> と、すれば同様動作ができるかと思います。
補足
ありがとうございます！ できました！！ もうひとつだけ教えていただけますか？ クリックできるのがわかるように、 指マークにするのって、 <a>タグで囲うしかないでしょうか？ すみません。 教えてください。
- yambejp
- ベストアンサー率51% (3827/7415)
それはtype=imageがsubmitを兼ねているからです。 つまりページを読み込みなおしています。 もともとsubmitが目的のformではないので submitしないようにすれば問題ないでしょう。 以下のように書き換えてください。 修正前：<form> 修正後：<form onSubmit="return false">
補足
ありがとうございます！ ただ、できませんでした。 <form onSubmit="return false"> 全体： <input type="image"src="img/btn_send.gif" alt=" 白 " onClick="document.getElementById('tableall').className='white'"> </form> とやってみたのですが、 違うところで読んでいるcgiに行って エラーになるんです。。 教えてください。。
お礼
できましたー！ ありがとうございます！ 助かりました！！