Диаграмма с вводом значений. VML HTML - Помощь студентам

Etrusk · 16.03.2014, 18:29

Здравствуйте! У меня было задание построить график и что бы можно было вводить собственные значения.
ааа.png
Значения изменяются, но нужно что бы зелёный столбец и жёлтый были связаны, например при увеличение зелёного столбца, жёлтый, без изменения размера сместился бы вверх. А у меня тут просто накладываются один на другой(

Код HTML:

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<title>Моя страница</title>

<style>
v\:* {behavior:url(#default#VML);}
#my1 {top: 225px; left: 50px;  width: 20px; height: 0px;}
#my2 {top: 225px; left: 110px; width: 20px; height: 0px;}
#my3 {top: 225px; left: 170px; width: 20px; height: 0px;}
#my4 {top: 225px; left: 230px; width: 20px; height: 0px;}
#my5 {top: 225px; left: 290px; width: 20px; height: 0px;}

#my10 {top: 225px; left: 50px;  width: 20px; height: 0px;}
#my20 {top: 225px; left: 110px; width: 20px; height: 0px;}
#my30 {top: 225px; left: 170px; width: 20px; height: 0px;}
#my40 {top: 225px; left: 230px; width: 20px; height: 0px;}
#my50 {top: 225px; left: 290px; width: 20px; height: 0px;}
</style>
     <script>
function Change(Object, ObjectHeight)
  {
   Object.style.top=225-ObjectHeight.value
   Object.style.height=ObjectHeight.value
  }  </script>
</head>

<body>

<! ***********прямоульник сер фон********************>
<v:rect style='position:absolute;left:30;top:25;
 width:360;height:200;' fillcolor="gray">
</v:rect>

<! оси-линии со стрелками "line" и stroke end arrow="block">

<v:line from="20 210" to="380 210" strokecolor="black">
  <v:stroke endarrow="block"/>
</v:line>

<v:line from="20 210" to="20 10" strokecolor="black">
  <v:stroke endarrow="block"/>
</v:line>

<! ***********прямоульник зел********************>
<v:rect  id="my1" style='position:absolute;' fillcolor="green">
</v:rect>

<v:rect id="my2" style='position:absolute;' fillcolor="green">
</v:rect>

<v:rect id="my3" style='position:absolute;' fillcolor="green">
</v:rect>

<v:rect id="my4" style='position:absolute;' fillcolor="green">
</v:rect>

<v:rect id="my5" style='position:absolute;' fillcolor="green">
</v:rect>

 <! ***********прямоульник жёл********************>
<v:rect id="my10" style='position:absolute;' fillcolor="yellow">
</v:rect>

<v:rect id="my20" style='position:absolute;' fillcolor="yellow">
</v:rect>

<v:rect id="my30" style='position:absolute;' fillcolor="yellow">
</v:rect>

<v:rect id="my40" style='position:absolute;' fillcolor="yellow">
</v:rect>

<v:rect id="my50" style='position:absolute;' fillcolor="yellow">
</v:rect>

 <form name=mycalc>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Зелёный  <br>
h1 <INPUT size=3 value="20" name=h1><BR>
h2 <INPUT size=3 value="40" name=h2><BR>
h3 <INPUT size=3 value="60" name=h3><BR>
h4 <INPUT size=3 value="80" name=h4><BR>
h5 <INPUT size=3 value="100" name=h5><BR>
<br>
Желтый <br>
h1 <INPUT size=3 value="0" name=h10><BR>
h2 <INPUT size=3 value="0" name=h20><BR>
h3 <INPUT size=3 value="0" name=h30><BR>
h4 <INPUT size=3 value="0" name=h40><BR>
h5 <INPUT size=3 value="0" name=h50><BR>
<INPUT type=button value="Изменить"
onClick="
Change(document.all.my1, mycalc.h1);
Change(document.all.my2, mycalc.h2);
Change(document.all.my3, mycalc.h3);
Change(document.all.my4, mycalc.h4);
Change(document.all.my5, mycalc.h5);
Change(document.all.my10, mycalc.h10);
Change(document.all.my20, mycalc.h20);
Change(document.all.my30, mycalc.h30);
Change(document.all.my40, mycalc.h40);
Change(document.all.my50, mycalc.h50)" >
</form>
</body>
</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Веб страница с вводом 7-ми чисел и нахождением наименьшего из них (html или php)	Kradmy	Помощь студентам	2	05.02.2012 14:58
Поля со списками, суммирование значений из полей, диаграмма	depp.88	Microsoft Office Access	11	22.10.2011 12:11
Создание VML-изображения	-=aHTPoПоС=-	Помощь студентам	0	15.12.2010 19:56
Работа с вводом / выводом. С++	Slavytich	Помощь студентам	4	28.11.2010 14:02
Сортировка с вводом чисел	Syltan	Общие вопросы C/C++	15	26.09.2009 22:03