プロが教える店舗＆オフィスのセキュリティ対策術

ボタンの並び替えとマウスイベント

締切済

  • 質問者：burnquist8
  • 質問日時：
  • 回答数：1件

分かりにくいかも知れませんが、以下のソースを用いて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の部分を教えてもらえると幸いです。
以上、質問が下手で分かりづらいですが、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： shogo0809
  • 回答日時：

こんなんでどうですか。



<!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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報