<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<title>Ejemplo 16</title>
<script type='text/javascript'>
var volactual;
function ini(tempini,tmax,tmin,escala)
{
p_horizontal(tempini,tmax,tmin,escala);
p_vertical(tempini,tmax,tmin,escala);
}
function p_horizontal(consigna,tmax,tmin,escala)
{
if (consigna > tmax ) alert("Maximo volumen superado")
else if (consigna < tmin ) alert("Minimo volumen superado")
else {
volactual = consigna;
while (document.getElementById("volumeh").hasChildNodes( )) document.getElementById("volumeh").removeChild(doc ument.getElementById("volumeh").firstChild);
var control = document.createElement('TABLE');
control.className="h_control"
control.id="h_control";
control.width = 300
control.cellPadding="0";
control.cellSpacing="0";
control.border="0";
var control_f = document.createElement('TR');
var control_left = document.createElement('TD');
var img1=document.createElement("img"); img1.src="images/leftarrow.png";
control_left.setAttribute("onClick", "p_horizontal("+(tempactual - escala)+','+tmax+','+tmin+','+escala+")");
control_left.appendChild(img1);
control_left.className="leftbutton"
control_left.style.borderRight="1px solid #616161";
control_left.width
control_f.appendChild(control_left);
for(var i = tmin; i <= tmax; i= i + escala)
{
var control_c = document.createElement('TD');
control_c.innerHTML=" ";
control_c.width = ((control.width - 84) / (tmax-tmin) ) * escala;
//alert(control_c.width)
control_c.height = 80;
control_c.setAttribute("onClick", "p_horizontal("+i+','+tmax+','+tmin+','+escala+")" );
control_c.style.borderTop="1px solid #616161";
control_c.style.borderBottom="1px solid #616161";
if(i <= consigna) control_c.style.backgroundColor = "#cac7c6";
control_f.appendChild(control_c);
}
var control_right = document.createElement('TD');
var img1=document.createElement("img"); img1.src="images/rightarrow.png";
control_right.setAttribute("onClick", "p_horizontal("+(tempactual + escala)+','+tmax+','+tmin+','+escala+")");
control_right.appendChild(img1);
control_right.style.borderLeft="1px solid #616161";
control_f.appendChild(control_right);
control.appendChild(control_f);
document.getElementById("volumeh").appendChild(con trol);
}
}
function p_vertical(consigna,tmax,tmin,escala)
{
if (consigna > tmax ) alert("Volumen maximo superado")
else if (consigna < tmin ) alert("Volumen minimo superado")
else {
volactual = consigna;
while (document.getElementById("volumev").hasChildNodes( )) document.getElementById("volumev").removeChild(doc ument.getElementById("volumev").firstChild);
var control = document.createElement('TABLE');
control.cellPadding="0";
control.cellSpacing="0";
control.border="0";
var size = 300;
var control_f = document.createElement('TR');
var control_left = document.createElement('TD');
var img1=document.createElement("img"); img1.src="images/uparrow.png";
control_left.setAttribute("onClick", "p_vertical("+(volactual + escala)+','+tmax+','+tmin+','+escala+")");
control_left.appendChild(img1);
control_left.className="leftbutton"
control_left.style.borderBottom="1px solid #616161";
control_f.appendChild(control_left);
control.appendChild(control_f)
for(var i = tmax; i >= tmin; i= i - escala)
{
var control_f = document.createElement('TR');
var control_c = document.createElement('TD');
control_c.innerHTML=" ";
control_c.height = ((size - 84) / (tmax-tmin) ) * escala;
control_c.width = 70;
control_c.style.borderLeft="1px solid #616161";
control_c.style.borderRight="1px solid #616161";
if(i <= consigna) control_c.style.backgroundColor = "#cac7c6";
control_c.setAttribute("onClick", "p_vertical("+i+','+tmax+','+tmin+','+escala+" )");
control_f.appendChild(control_c);
control.appendChild(control_f)
}
var control_f = document.createElement('TR');
var control_right = document.createElement('TD');
var img1=document.createElement("img"); img1.src="images/downarrow.png";
control_right.setAttribute("onClick", "p_vertical("+(volactual - escala)+','+tmax+','+tmin+','+escala+")");
control_right.appendChild(img1);
control_right.style.borderTop="1px solid #616161";
control_f.appendChild(control_right);
control.appendChild(control_f)
document.getElementById("volumev").appendChild(con trol);
}
}
</script>
</head>
<body onload="ini(20,25,20,0.1)">
<div id="volumeh"></div><br><br>
<div id="volumev"></div><br><br>
</body>
</html>