- 締切済み
ボタンの並び替えとマウスイベント
分かりにくいかも知れませんが、以下のソースを用いて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の部分を教えてもらえると幸いです。 以上、質問が下手で分かりづらいですが、よろしくお願いします。
- burnquist8
- お礼率0% (0/4)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- shogo0809
- ベストアンサー率47% (25/53)
こんなんでどうですか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" id="html"> <head> <title>sample</title> <!-- メタタグ省略 --> <style><!-- input#btnA, input#btnB, input#btnC { position: absolute; top: 100px; width: 100px; } input#btnA { left: 137px; } input#btnB { left: 163px; } input#btnC { left: 250px; } --></style> </head> <body onload="a()"> <form> <input type="button" id="btnA" value="34" onmouseover="b(this)" /> <input type="button" id="btnB" value="58" onmouseover="b(this)" /> <input type="button" id="btnC" value="100" onmouseover="b(this)" /> </form> <script type="text/javascript"><!-- var idList = ['btnA', 'btnB', 'btnC']; function a() { var key, obj; for (key in idList) { obj = document.getElementById(idList[key]); obj.style.zIndex = 1000 - obj.value; } } function b(obj) { a(); obj.style.zIndex = 1000; } //--></script> </body> </html>
関連するQ&A
- ボタンの配置
初心者の問題ですが。。 ページの中央にボタン配置したいときはどのタグ使うでしょうか。 <asp:Button id="cmdSubmit" style="Z-INDEX: 105; LEFT: 100px; POSITION: absolute; TOP: 400px"runat="server" Text="送信" Width="128px"></asp:Button> <asp:Button id="cmdCancel" style="Z-INDEX: 106; LEFT: 350px; POSITION: absolute; TOP: 400px"runat="server" Text="キャンセル" Width="128px"></asp:Button> LEFTのところcenterに変えてみたんですがだめでした。。。 教えてください。 よろしくお願いします。
- 締切済み
- Microsoft ASP
- ボタンフォームに対するマウスオーバー効果追加
簡単に実現できれば、程度の要望なのですが、以下の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
- ボタンクリック時の処理ができない
作成したcleartest()が呼ばれません。 function定義の直後に、alert()を入れてもダイアログボックスの表示ができずに機能しません。 分からないのはfunction定義の直前に、cleartest()を加えるとダイアログボックスの表示が出ますが、ボタンを押下してもクリア処理ができません。 どのような事を考慮すれば良いですか? また、代替案はどのような方法がございますか? <!-- htmlファイル --> <div style="position:absolute; top:100px; left:500px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳ ゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1" value="クリア" id="test" onclick="cleartest(1);" runat="server" /> </div> <div style="position:absolute; top:200px; left:500px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳ ゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1" value="クリア" id="test" onclick="cleartest(2);" runat="server" /> </div> //jsファイル cleartest(); //一時的に追加 function cleartest(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }
- ベストアンサー
- JavaScript
- ボタンタグを作っているのですが…
<input style="font-size:15; width:150px; height:30px; top: 200px; left: 150px; position: absolute;" type="button" value="Top" style="border-width:4"> 上のように書き、topの後ろの値とvalueの中身だけ変えて、ボタンの数だけ並べてみたのですが、もっとすっきりした書き方はありませんか。<div style …と書いてみたりいろいろやってみたのですが、うまくいきません。 また、font-sizeの後ろの15は何でしょうか。ptやpxなら単位が必要だと思うのですが。さらに、値を変えてもフォントの大きさが変わらないのですが、なぜでしょうか。 よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- お気に入りを追加ボタンをつけたのですが(absolute)
家庭向け＞ブログで質問して回答がなかったのでコチラで質問します。 ブログでお気に入りに追加ボタンをCSSのabsolute指定で つけたのですが、なぜか画面の一番左下に表示されてしまいます。 ブログでなく自作のホームページだとうまくいきます。 CSSは .oki { top:40px; left:500px; position:absolute; } htmlのbody内に追加 <div class="oki"><input type="button" value="お気に入りに追加" onclick="javascript:window.external.AddFavorite('http://xxxxx.xxxxx.xxx/','サイト名')" style="border-style:solid; border-width:2px; border-color:#66CCFF; background:blue; font-size:10pt; color:#ffffff" /></div> どうして正しく表示されないのでしょうか？
- ベストアンサー
- HTML
- ボタンに書かれている文字の入れ替え
２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>
- ベストアンサー
- JavaScript
- CSSでのボタンのエフェクト
数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？
- 締切済み
- JavaScript
- onClick関数
作成したclear()が呼ばれません。 function定義の直下に、alert()を入れてもダイアログボックスの表示がでません。 htmlタグの設定がダメなのでしょうか? <!-- htmlファイル --> <div style="position:absolute; top:65px; left:737px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳ ゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1710" value="クリア" name="Check1710" onClick="clear(1)"; runat="server" /> </div> <div style="position:absolute; top:114px; left:737px;" title="" runat="server"> <input type="button" style="width:40px; height:20px; font-family:'ＭＳ ゴシック'; font-size:9pt; color:#000000; text-align:center;" tabindex="1720" value="クリア" id="Check1720" onclick="clear(2);" runat="server" /> </div> //jsファイル function clear(btnNo){ alert("確認"); if(btnNo == 1) { document.getElementById("TextBox1").value = "" } else if (btnNo == 2) { document.getElementById("TextBox2").value = "" } }
- ベストアンサー
- JavaScript
- ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
- 1カラムのリキッドレイアウトについて。
１カラムのサイトを作っています。 背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。 【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div> →これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。 文章などのコンテンツがないため、背景画像が全画面で表示されないのです。 どのようにしたら意図する表示が可能でしょうか？ できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。
- 締切済み
- CSS
