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>