ボタンの問題点と解決方法
- AページとBページを行き来する際のボタンの問題点と解決方法について説明します。
- Aページでの設定を保持しながら、Bページの設定をDBに格納する方法について解説します。
- イメージボタンを使用することで、ユーザビリティを向上させつつ、DBへの設定保存も可能です。
- ベストアンサー
input ボタンを教えてください。
Aページで設定を行った後、Aページにあるボタンをクリックして、Bというページにジャンプします。 Bページで様々な設定を行った後、Bページにあるボタンをクリックして、再びAページに戻る一方、Bページでの設定をDBに飛ばします。 という仕様ですが、、、 問題点は、 BページのボタンをクリックしてAページに戻ると、Aページの設定は全部なくなってしまいます。 自分は下記のようにしましたが、Aページの設定はそのままでいいですが、Bページでの設定をDBに格納できません。 <input name="button" type="button" onclick="history.back()" style="background-image: url(images/button_ok.gif);font-size: 14px;color: #000000;height: 25px;width: 116px;background-repeat: no-repeat; border: 0px; " /> 逆に、<input type="submit"> こいうふうにやるとBページの設定をDBに飛ばせるが、Aページに戻ると設定がなくなり初期状態なります。 ぜひよろしくお願いいたします。 可能ならイメージボタンでお願いいたします。
- oyaoyaoya777888
- お礼率26% (24/92)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ダメでした。 ==>確かに。 ・別窓（target="_blank"）表示じゃいやなんですよね。 ・やっぱし、XMLHttpRequestで画面遷移無しで、サーバーに送信しかないかなあ～
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
formのonsubmitでhistory.back()すればどうだろう <form onsubmit="history.back();" action="URL"> --------------------- <button type="submit"> <img src="images/button_ok.gif" alt="送信" style="height: 25px;width:116px;border:0px;"> </button> </form>
関連するQ&A
- 戻るボタンを押すと、ページ下に飛んでしまいます・・
HPをタグ打ちで作成しております。解決方法が見つからなかったので教えてください。 bodyに、A「戻るボタン」とB「ページのTOPへ戻る」リンクを設置しました。 <input type="button" value="戻る" onClick="history.back()"> <a href="#top">ページのトップへ戻る</a> BをクリックしてからAをクリックすると、前のページではなくBの場所へ戻ってしまうんです・・。 history.back()だからそうなってしまうんですよね？ そこまでは分かるのですが、history.back()を何にすればブラウザの戻るボタンと同じように出来るのかわからないのでどなたか教えて下さい。 色々調べたのですが、検索の仕方が悪いのか解決策が見つかりません。 初心者で申し訳ありませんが宜しくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- ボタンの並び替えとマウスイベント
分かりにくいかも知れませんが、以下のソースを用いてJavaScriptの部分でボタンの並び替え、 マウスイベントを実行したいんですが、うまく実行できないので教えてください。 <html><head><title>a</title> <input type='button' value='34' style='background-color:#f60;left:137px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='58' style='background-color:#f60;left:163px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='100' style='background-color:#f60;left:250px;position:absolute;top:100px;width:100' onMouseOver='b()'> <SCRIPT LANGUAGE="JavaScript"> function a(){ ここでボタンをvalue='数値'の小さい物が最前に来るよう並び替え （value = 100,58,34の順でhtmlで書くのではなく、ここで並び替えをしたい） } function b() { ここでマウスがボタンに乗ったらそのボタンを最前に表示したい } </SCRIPT></body></html> function a,bの部分を教えてもらえると幸いです。 以上、質問が下手で分かりづらいですが、よろしくお願いします。
- 締切済み
- JavaScript
- ハイパーリンクをインプットボタンで作るには
HTML初心者です。 <a href="input.php?action=rewrite">修正する</a> 上記のハイパーリンクをインプットボタンでリンクさせたいのですが <input type="button" class="button" value="修正する" onClick='window.open("input.php?action=rewrite")'> だと新しいウィンドウが開いてしまいますし <input type="button" class="button" value="修正する" onClick=("input.php?action=rewrite")> だとリンクできません。 どのようにすれば良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- 「戻るボタン」 ： ボタンを使わずに、・・・
HTMLでは、戻るボタンは、 <FORM> <INPUT TYPE="button" VALUE="戻る" onClick="history.back </FORM> ですが、この動作で、 戻るボタンではなく、 <table><tr><td>戻る</td></tr></table> をクリックするようにしたいのですが、・・・ 可能でしょうか。 可能でしたら、htmlをお願いします。
- ベストアンサー
- HTML
- ボタンフォームに対するマウスオーバー効果追加
簡単に実現できれば、程度の要望なのですが、以下のHTMLでボタン上にマウスカーソルが乗ったら (1) この人に投票する！ が赤字になる (2) kao.pngが、nikoniko.png に変わる (3) マウスを離すと(1) (2) が既定に戻る と動作させることはできますか？ なお、(1) については、inputタグに onmouseover="this.color='red'" onmouseout="this.color='blue'" を仕込んでみましたがダメでした。 <html> <head> <style type="text/css"> .btn { background-repeat: no-repeat; color: blue; background-position: left; padding-left: 25px; background-image: url(./kao.png); /* 22px x 22px */ } --> </style> </head> <body> <input type='button' name='vote' value='この人に投票する！' class='btn'/> </body> </html>
- ベストアンサー
- CSS
- IE7でのtext-indent:-9999px
複数ブラウザ（Win：IE7,8、Firefox3～、Mac：Safari3～、Firefox3～）対応のコーディングをしています。 申込ページなどでinput type="button"のvalueに対して、CSS側でtext-indent:-9999pxを設定すると、 他のブラウザでは問題ないのですが、IE7だけ、inputごとページ外に移動してしまいます。 inputボタン自体には、いかのような記述をしています。 form p#bt-send input { border:none; text-indent:-9999px; cursor:pointer; width:217px; height:41px; background:url(ボタンイメージのパス) no-repeat center 0%; } テキストインデントを使わないやり方で、inputのvalueを見せないやり方はありますか？ ちなみにボタンイメージには「送信」という文言になっており、value="送信"としていますが、 テキストインデントを使わないと、ボタンイメージの上にデバイスフォントが出てしまいます。
- ベストアンサー
- HTML
- リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ list-style-type:none; padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { display:inline; padding:0; margin:0px; float:left; } #headerMenu a { display:block; text-decoration:none; text-indent:-5000px; height:25px; } #home { display:block; background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; width:63px; background-position:0px 0px; } #home a:hover { background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; background-position:0px -25px; } #sitemap { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; width:90px; background-position:0px 0px; } #sitemap a:hover { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; background-position:0px -25px; } #recruit { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #recruit a:hover { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; background-position:0px -25px; } #contact { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #contact a:hover { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; background-position:0px -25px; }
- 締切済み
- CSS
- ロールオーバーの挙動がおかしい
あるページに <input type="button">や<input type="submiit"> によるボタンをいくつか配置しています。 CSSでボタンのスタイルを設定しており、hoverのスタイルも設定しています。 ボタンのひとつは、クリックすると別ウィンドウでリンクが開くようにしていますが IE8で見ると、このボタンだけロールオーバーが枠(罫線)にしか反応しません。 ボタンの枠の上にマウスがあるときはhoverの状態になり、ボタン本体(テキスト部やpadding部)にマウスがあるときは無反応です。 しかしFFではボタン全体でしっかり反応していました。 その他のボタンは、IEでもFFでも正しく動いています。 IE8のエラー回避方法を教えてください。 よろしくお願いいたします。 【CSS】 .button2 { padding: 1px 10px 1px 10px ; margin: 0px 3px 0px 3px ; border-top: 2px double #55bcb8; border-left: 2px double #55bcb8; border-right: 2px double #012a29; border-bottom: 2px double #012a29; background: #449592 left bottom repeat-x; text-align: center; text-decoration: none; display: block; font-size: 12px; color: #FFF; } .button2:hover{ padding: 1px 10px 1px 10px ; margin: 0px 3px 0px 3px ; border-top: 2px double #012a29; border-left: 2px double #012a29; border-right: 2px double #55bcb8; border-bottom: 2px double #55bcb8; background: #55bcb8 left bottom repeat-x; text-align: center; text-decoration: none; } 【HTML】 <form style="float:right; margin-right:20px;"> <input name="map" class="button2" onclick="window.open('地図.html','_blank','scrollbars=no,width=550,height=500'); return false;" type="button" value="map"/> </form>
- ベストアンサー
- CSS
- 複数のボタンを等間隔に、かつ中央に配置する
ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、 さらにその3つがちょうどページの中央に表示されるようにしたいです。 cssをどのように記述すればいいですか？ ↓下記のようなイメージにしたいです。 -------------------- -------------------- □ □ □ ←これがボタンです ↓htmlファイルです↓ <div class="button"> <input type="submit" value="＜＜ 戻る ＜＜" /> </div> <div class="button"> <input type="submit" value="選択リセット" /> </div> <div class="button"> <input type="submit" value="＞＞ 進 む＞＞" /> </div> ↓CSSファイルです↓ div.button { padding-right:35px; float:left; } 上記設定で、ボタンの左右間隔はいい感じにあいたのですが 全体的に左に寄ってしまってます。 よろしくお願いいたします。
- ベストアンサー
- HTML
- JavaScript ボタンで指定の箇所を変更する方法
よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 【やりたい事】 １．ボタンを作りたい 水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わり もう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。（水色→紫色→赤色→水色→紫色→・・・） ２．行単位・列単位で一括で変更したい 縦１、または横１などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたい という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦1<br><input type="button" name="tate_btn001" id="x1y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(1)"/></td> <td>縦2<br><input type="button" name="tate_btn002" id="x2y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(2)"/></td> <td>縦3<br><input type="button" name="tate_btn003" id="x3y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(3)"/></td> </tr> <tr> <td>横1 <input type="button" name="yoko_btn001" id="x0y1" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(1)"/> </td> <td><input type="button" name="btn001" id="x1y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn002" id="x2y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn003" id="x3y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横2 <input type="button" name="yoko_btn002" id="x0y2" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(2)"/> </td> <td><input type="button" name="btn004" id="x1y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn005" id="x2y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn006" id="x3y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横3 <input type="button" name="yoko_btn003" id="x0y3" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(3)"/> </td> <td><input type="button" name="btn007" id="x1y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn008" id="x2y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn009" id="x3y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
補足
yyr446様 ありがとうございます。 この方法だと、両方ともダメでした。