たくさんのBOXの描画
下記コードでは3個のBOXしかありませんが、1000個のBOX等の場合もっと効率のよい記述法はありませんか?
本来したいことは、BOXを不特定個数、場所に描画させたいのですが。
HTMLでは最初の定義したBOXしか加工できないのでしょうか?
BasicやCみたいに、いきなりdrawLine()に描画はできませんか?
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>test(VML)</title>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
<script language="JavaScript"><!--
//----------------------------------------------描画
function drawLine(){
switch(eval(document.test.set.value)){
case 1:box0.style.top=100;box0.style.left= 50;box0.style.width=30; box0.style.height=30;
box1.style.top=110;box1.style.left=150;box1.style.width= 0; box1.style.height= 0;
box2.style.top=120;box2.style.left=200;box2.style.width= 0; box2.style.height= 0;break;
case 2:box0.style.top=100;box0.style.left= 50;box0.style.width=30; box0.style.height=30;
box1.style.top=110;box1.style.left=150;box1.style.width=30; box1.style.height=30;
box2.style.top=120;box2.style.left=200;box2.style.width= 0; box2.style.height= 0;break;
case 3:box0.style.top=100;box0.style.left= 50;box0.style.width=30; box0.style.height=30;
box1.style.top=110;box1.style.left=150;box1.style.width=30; box1.style.height=30;
box2.style.top=120;box2.style.left=200;box2.style.width=30; box2.style.height=30;break;
}
}
//----------------------------------------------
// --></script>
</head>
<body>
<form name="test">
<script>
//-------------------------------------------------------------------
var i,ht =[];
i=0;
ht[i] = '<select onChange="drawLine()" id="set">';
for( var i=1; i<4;)
ht[i] = '<option value='+i+'>'+(i++)+'</option>';
ht[i] = '</select>';
document.write('個数 = ', ht.join(''),'<BR>');
//---------------------------------------------------------------------
</script>
<v:rect id=box0 style="position:absolute;" fillcolor="#999966"></v:rect>
<v:rect id=box1 style="position:absolute;" fillcolor="#999966"></v:rect>
<v:rect id=box2 style="position:absolute;" fillcolor="#999966"></v:rect>
</FORM>
</body>
</HTML>