prova cosi:
codice:
<html>
<head>
<title></title>
<style type="text/css">
#box { margin:0px;padding:0px;
width: 400px; height: 100px;
border-style: solid;
border-color: #000000;
border-width:1px; }
#box_sp { width: 10px; height: 10px;
min-width: 10px; max-width: 400px;
min-height: 10px; max-height: 100px;
background-color: red; }
#advice { width: 500px; height: 80px;
padding: 3px;
color: #FF0000;
border: solid #FF0000 2px;
position: absolute; top:10px; left:500px;
display:none;
z-index: 20; }
.inp { width:25px; height:25px;
background-color: #333333;
color: #ffffff;
border: 2px #ffffff ridge;
border-radius: 10px 10px 10px 10px;
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center; }
</style>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
var pixw = 400;
var pixh = 100;
function morewidth () {
var dimw = $("#box_sp").width(); // Valore lunghezza del riquadro rosso
var boxL = $("#box_lung").val();
$("#box_sp").width(dimw+10); // Aumento della lunghezza riquadro rosso
$("#lung").val(dimw+10); // Aumento del valore orizzontale dell'input
$("#box_lung").val(new Number(boxL)+1);
if ($("#box_sp").width() >= 400) { // Apertura avviso e mantiene il valore in caso di..
$("#lung").val(400) && $("#box_lung").val(40);
$("#advice").show("slow");
}
$("#risultato").val($("#box_alt").val() * $("#box_lung").val());
}
function lesswidth () {
var dimw = $("#box_sp").width(); // Valore lunghezza del riquadro rosso
var boxL = $("#box_lung").val();
$("#box_sp").width(dimw-10); // Diminuzione della lunghezza riquadro rosso
$("#lung").val(dimw-10); // Diminuzione del valore orizzontale nell'input
$("#box_lung").val(boxL-1);
if ($("#lung").val() <= 10) { // Mantiene il valore a 1 in caso di..
$("#lung").val(10) && $("#box_lung").val(1);
}
if ($("#box_sp").width() < pixw) { // Chiusura avviso
$("#advice").hide("slow");
}
if($("#risultato") != 1)
$("#risultato").val($("#risultato").val() - $("#box_alt").val());
}
function moreheight () {
var dimh = $("#box_sp").height(); // Valore altezza riquadro rosso
var boxA = $("#box_alt").val();
$("#box_sp").height(dimh+10); // Aumento altezza riquadro rosso
$("#altez").val(dimh+10); // Aumento valore verticale nell'input
$("#box_alt").val(new Number(boxA)+1);
if ($("#altez").val() >= 100) { // Apertura avviso e mantiene il valore in caso di..
$("#altez").val(100) && $("#box_alt").val(10);
$("#advice").show("slow");
}
$("#risultato").val($("#box_alt").val() * $("#box_lung").val());
}
function lessheight () {
var dimh = $("#box_sp").height(); // Valore altezza riquadro rosso
var boxA = $("#box_alt").val();
$("#box_sp").height(dimh-10); // Diminuzione dell'altezza riduadro rosso
$("#altez").val(dimh-10); // Diminuzione valore verticale dell'input
$("#box_alt").val(boxA-1);
if ($("#altez").val() <= 10) { // Mantiene il valore a 1 in caso di..
$("#altez").val(10) && $("#box_alt").val(1);
}
if ($("#box_sp").height() < pixh) { // Chiusura avviso
$("#advice").hide("slow");
}
if($("#risultato").val() != 1)
$("#risultato").val($("#risultato").val() - $("#box_lung").val());
}
</script>
</head>
<body>
<div id="box">
<div id="box_sp"></div>
</div>
<div id="advice">
<span style="font-weight:bold;">Avviso</span>
<span style="font-size:11px;">Bla bla bla bla bla bla bla bla bla.
</span>
</div>
<button type="button" onclick="morewidth()" class="inp">+</button>
<span>Lunghezza</span>
<button type="button" onclick="lesswidth()" class="inp">-</button>
<button type="button" onclick="moreheight()" class="inp">+</button>
<span>Altezza</span>
<button type="button" onclick="lessheight()" class="inp">-</button>
<span>Grandezza in pixel:</span>
<input type="text" id="lung" style="width:30px;" value="10" readonly="readonly" />
<span>x</span>
<input type="text" id="altez" style="width:30px;" value="10" readonly="readonly" />
<span>Numero riquadri:</span>
<input type="text" id="box_lung" style="width:30px;text-align:right;" value="1" readonly="readonly" />
<span>lung.</span>
<input type="text" id="box_alt" style="width:30px;text-align:right;" value="1" readonly="readonly" />
<span>alt.</span>
<span>Risultato totale riquadri:</span>
<input type="text" id="risultato" style="width:30px;" value="1" readonly="readonly" />
</body>
</html>