<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<script type="text/javascript">
var clase = function() {
this.spinButton = function(bol, este) {
var input = este.parentNode.parentNode.getElementsByTagName('i nput')[0];
var cantidad = (bol) ? parseInt(input.value, 10) + 5 : parseInt(input.value, 10) - 5;
if(cantidad < 0) { cantidad = 0; input.value = 0;}
if(cantidad > 50) { cantidad = 50; input.value = 50;}
input.value = cantidad;
}
}
s = new clase();
window.onload = function() {
for (var i = 0, incr = document.querySelectorAll('.up'), decr = document.querySelectorAll('.down'); i < incr.length; i++ ) {
incr[i].onclick = function() {s.spinButton(true, this)};
decr[i].onclick = function() {s.spinButton(false, this)};
}
}
</script>
<style type="text/css">
* {
position: relative;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
span.spin {
float: left;
margin: 30px;
}
span.spin > input {
float: left;
}
span.spin > span.botonera {
float: left;
}
span.spin > span.botonera img {
width: 16px;
height: 11px;
display: block;
border: 0;
padding: 0;
}
</style>
</head>
<body>
<form>
<span class="spin">
<input type="text" name="cant" id="cant" value="0" readonly="readonly" size="2" />
<span class="botonera">
<img src="spin_up.png" class="up" alt="u1" />
<img src="spin_down.png" class="down" alt="d1" />
</span>
</span>
<span class="spin">
<input type="text" name="cant1" id="cant1" value="0" readonly="readonly" size="2" />
<span class="botonera">
<img src="spin_up.png" class="up" alt="u2" />
<img src="spin_down.png" class="down" alt="d2" />
</span>
</span>
<span class="spin">
<input type="text" name="cant2" id="cant2" value="0" readonly="readonly" size="2" />
<span class="botonera">
<img src="spin_up.png" class="up" alt="u3" />
<img src="spin_down.png" class="down" alt="d3" />
</span>
</span>
</form>
</body>
</html>