You are here: irt.org | FAQ | DHTML | Q881 [ previous next ]
Yes - using clipping:
<span id="sphere" style="position:absolute; width:100; height:100;">
<img src="sphere.gif" width="100" height="100">
</span>
<script type="text/javascript" language="JavaScript">
<!--
if (document.all) {
document.all('sphere').style.posLeft = 110;
document.all('sphere').style.posTop = 114;
}
else if (document.layers) {
document.layers['sphere'].left = 106;
document.layers['sphere'].top = 102;
}
function changeit() {
if (document.all)
document.all('sphere').style.clip =
'rect(' + t + ' ' + r + ' ' + b + ' ' + l + ')';
else if (document.layers) {
document.layers['sphere'].clip.top = t;
document.layers['sphere'].clip.right = r;
document.layers['sphere'].clip.bottom = b;
document.layers['sphere'].clip.left = l;
}
document.forms[0].top.value = t;
document.forms[0].right.value = r;
document.forms[0].left.value = l;
document.forms[0].bottom.value = b;
}
var t=0, r=100, b=100, l=0;
//-->
</script>
<form>
<table height="300" width="300">
<tr height="100" width="100">
<td valign="middle" align="center">
top<br><input type="text" name="top" size="3">
</td>
<td valign="middle" align="center">
<input type="button" value=" /\ " onClick="t-=10;changeit()">
<br>
<input type="button" value=" \/ " onClick="t+=10;changeit()">
</td>
<td valign="middle" align="center">
right<br><input type="text" name="right" size="3">
</td>
</tr>
<tr height="100" width="100">
<td valign="middle" align="center">
<input type="button" value=" < " onClick="l-=10;changeit()">
<input type="button" value=" > " onClick="l+=10;changeit()">
</td>
<td>
</td>
<td valign="middle" align="center">
<input type="button" value=" < " onClick="r-=10;changeit()">
<input type="button" value=" > " onClick="r+=10;changeit()">
</td>
</tr>
<tr height="100" width="100">
<td valign="middle" align="center">
left<br><input type="text" name="left" size="3">
</td>
<td valign="middle" align="center">
<input type="button" value=" /\ " onClick="b-=10;changeit()">
<br>
<input type="button" value=" \/ " onClick="b+=10;changeit()">
</td>
<td valign="middle" align="center">
bottom<br><input type="text" name="bottom" size="3">
</td>
</tr>
</table>
</form>