Adjusting Layer clip Properties (W3C)
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Layer Clip</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var origLayerWidth = 0
var origLayerHeight = 0
var currTop, currRight, currBottom, currLeft
function init() {
origLayerWidth = parseInt(document.getElementById("display").style.width)
origLayerHeight = parseInt(document.getElementById("display").style.height)
currTop = 0
currRight = origLayerWidth
currBottom = origLayerHeight
currLeft = 0
showValues()
}
function setClip(field) {
var val = parseInt(field.value)
switch (field.name) {
case "top" :
currTop = val
break
case "right" :
currRight = val
break
case "bottom" :
currBottom = val
break
case "left" :
currLeft = val
break
case "width" :
currRight = currLeft + val
break
case "height" :
currBottom = currTop + val
break
}
adjustClip()
showValues()
}
function adjustClip() {
document.getElementById("display").style.clip = "rect(" + currTop + "px " +
currRight + "px " + currBottom + "px " + currLeft + "px)"
}
function showValues() {
var form = document.forms[0]
form.top.value = currTop
form.right.value = currRight
form.bottom.value = currBottom
form.left.value = currLeft
form.width.value = currRight - currLeft
form.height.value = currBottom - currTop
}
var intervalID
function revealClip() {
var midWidth = Math.round(origLayerWidth /2)
var midHeight = Math.round(origLayerHeight /2)
currTop = midHeight
currBottom = midHeight
currRight = midWidth
currLeft = midWidth
intervalID = setInterval("stepClip()",1)
}
function stepClip() {
var widthDone = false
var heightDone = false
if (currLeft > 0) {
currLeft += -2
currRight += 2
} else {
widthDone = true
}
if (currTop > 0) {
currTop += -1
currBottom += 1
} else {
heightDone = true
}
adjustClip()
showValues()
if (widthDone && heightDone) {
clearInterval(intervalID)
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Layer Clipping Properties (W3C)</H1>
<HR>
Enter new clipping values to adjust the visible area of the layer.<P>
<DIV STYLE="position:absolute; top:130">
<FORM>
<TABLE>
<TR>
<TD ALIGN="right">layer.style.clip (left):</TD>
<TD><INPUT TYPE="text" NAME="left" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (top):</TD>
<TD><INPUT TYPE="text" NAME="top" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (right):</TD>
<TD><INPUT TYPE="text" NAME="right" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (bottom):</TD>
<TD><INPUT TYPE="text" NAME="bottom" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (width):</TD>
<TD><INPUT TYPE="text" NAME="width" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (height):</TD>
<TD><INPUT TYPE="text" NAME="height" SIZE=3 onChange="setClip(this)"></TD>
</TR>
</TABLE>
<INPUT TYPE="button" VALUE="Reveal Original Layer" onClick="revealClip()">
</FORM>
</DIV>
<DIV ID="display" STYLE="position:absolute; top:130; left:220; width:360;
height:180; clip:rect(0px 360px 180px 0px); background-color:coral">
<H2>ARTICLE I</H2>
<P>
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or
abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the
government for a redress of grievances.
</P>
</DIV>
</BODY>
</HTML>
Related examples in the same category