- 締切済み
ボタンの並び替えとマウスイベント
分かりにくいかも知れませんが、以下のソースを用いて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>
