I den her stil?
<html><head><style>
input, div {
border-bottom:1px solid black;
border-top:0px;
border-left:0px;
border-right:0px;
width:75px;
text-align:right
}
</style><script>
FIELDHEIGHT = 10;
FIELDWIDTH = 10;
FIELDPRICE = 200;
function calc() {
hObj = document.getElementById("PICTUREHEIGHT");
wObj = document.getElementById("PICTUREWIDTH");
h = parseInt(hObj.value);
w = parseInt(wObj.value);
if(isNaN(h) || h<0) h=0;
if(isNaN(w) || w<0) w=0;
hFields = Math.ceil(h/FIELDHEIGHT);
wFields = Math.ceil(w/FIELDWIDTH);
[b] hObj.value = hFields*FIELDHEIGHT;
wObj.value = wFields*FIELDWIDTH;[/b]
fields = hFields * wFields;
price = fields * FIELDPRICE;
fObj = document.getElementById("FIELDS");
pObj = document.getElementById("PRICE");
fObj.innerHTML = fields;
pObj.innerHTML = price;
}
</script></head><body>
<table>
<tr><td>Indtast højde:</td><td><input id="PICTUREHEIGHT" type="text" onchange="calc()" /></td><td> </td></tr>
<tr><td>Indtast bredde:</td><td><input id="PICTUREWIDTH" type="text" onchange="calc()" /></td><td> </td></tr>
<tr><td colspan=3> </td></tr>
<tr><td>Beregning:</td><td colspan=2> </td></tr>
<tr><td>Antal felter:</td><td><div id="FIELDS"> </div></td><td>felter</td></tr>
<tr><td>Pris:</td><td><div id="PRICE"> </div></td><td>kr.</td></tr>
</body></html>
Eller denne?
<html><head><style>
table, td, tr {
padding:0px;
margin:0px;
}
#OUTERDIV {
width:400px;
height:400px;
background:url(image.gif); /* Et 20x20 pixel image med 2x2 gråtone felter */
}
#INNERTABLE {
border-collapse:collapse;
}
#INNERDIV {
width:100px;
height:100px;
background:red;
}
#RESULT div {
border-bottom:1px solid black;
border-top:0px;
border-left:0px;
border-right:0px;
width:75px;
text-align:right
}
</style><script>
IE = (window.navigator.appName==
"Microsoft Internet Explorer");
FIELDHEIGHT = 10;
FIELDWIDTH = 10;
FIELDPRICE = 200;
changesize = true;
function changeSize(event) {
if(!changesize) return;
obj = document.getElementById('OUTERDIV');
w = Math.floor((event.clientX-obj.offsetLeft+document.body.scrollLeft-(IE?2:0)+FIELDHEIGHT)/FIELDWIDTH);
h = Math.floor((event.clientY-obj.offsetTop +document.body.scrollTop -(IE?2:0)+FIELDHEIGHT)/FIELDHEIGHT);
document.getElementById('INNERDIV').style.width = w*FIELDWIDTH;
document.getElementById('INNERDIV').style.height = h*FIELDHEIGHT;
document.getElementById('WIDTH').innerHTML = w*FIELDWIDTH;
document.getElementById('HEIGHT').innerHTML = h*FIELDHEIGHT;
document.getElementById('FIELDS').innerHTML = w*h;
document.getElementById('PRICE').innerHTML = w*h*FIELDPRICE;
}
function toggleChangeSize() {
changesize = !changesize;
}
</script></head><body>
<div id="OUTERDIV" onmousemove="changeSize(event)" onclick="toggleChangeSize()">
<table id="INNERTABLE"><tr><td id="INNERDIV"></td></tr></table></div>
Klik for at fryse rektanglet, klik igen for at bevæge det.
<table id="RESULT">
<tr><td>Højde:</td><td><div id="HEIGHT"> </div></td><td> </td></tr>
<tr><td>Bredde:</td><td><div id="WIDTH"> </div></td><td> </td></tr>
<tr><td>Beregning:</td><td colspan=2> </td></tr>
<tr><td>Antal felter:</td><td><div id="FIELDS"> </div></td><td>felter</td></tr>
<tr><td>Pris:</td><td><div id="PRICE"> </div></td><td>kr.</td></tr>
</table>
</body></html>
[Redigeret d. 19/02-06 18:19:31 af Brian][Redigeret d. 19/02-06 18:22:10 af Brian]