|
|
Articles | Dynamic Positioning
Source Code| back
Source Code for Example 3
<P>
<STRONG>This is the first sentence.
<SPAN ID="myLayer" STYLE="position: absolute;">
<FONT COLOR="red">Layer Text</FONT>
</SPAN>
This is the second sentence.</STRONG>
</P>
<SCRIPT LANGUAGE="JavaScript"><!--
function interrogate(what) {
var output = '';
if (document.layers)
for (var i in document.layers[what])
output += i + ' ' + document.layers[what][i] + '\n';
else if (document.all)
for (var i in document.all(what))
output += i + ' ' + document.all(what)[i] + '\n';
return output;
}
//--></SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Interrogate"
onClick="this.form.output.value = interrogate('myLayer')">
<P>
<TEXTAREA NAME="output" COLS="40" ROWS="10"></TEXTAREA>
</FORM>
|
Return
Source Code for Example 4
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function show(object) {
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
}
function hide(object) {
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
//--></SCRIPT>
<STYLE TYPE="text/css"><!--
.myStyle {
position: absolute;
visibility: hidden;
}
//--></STYLE>
<A HREF="#" onMouseover="show('myLayer1')"
onMouseout="hide('myLayer1')">Move mouse pointer over this link
text</A>
<DIV ID="myLayer1" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
This text is hidden from view.
<BR>
It is revealed when the mouse
<BR>
moves over the 1st link text
</TD></TR></TABLE>
</DIV>
<A HREF="#" onMouseover="show('myLayer2')"
onMouseout="hide('myLayer2')">Move mouse pointer over this link
text</A>
<DIV ID="myLayer2" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
This text is also hidden from view until it is
revealed when the mouse moves over the 2nd link text
</TD></TR></TABLE>
</DIV>
|
Return
Source Code for Example 7
<SPAN ID="myLayer" STYLE="position:absolute; top:50; left:50;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
var object = 'myLayer';
if (document.layers && document.layers[object] != null) {
document.layers[object].left -= 25;
document.layers[object].top -= 25;
}
else if (document.all) {
document.all[object].style.posLeft -= 50;
document.all[object].style.posTop -= 50;
}
//--></SCRIPT>
|
Return
Source Code for Example 8
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function show(object) {
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
}
function hide(object) {
if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
function reposition(object,x,y) {
if (document.layers && document.layers[object] != null) {
document.layers[object].left += x;
document.layers[object].top += y;
}
else if (document.all) {
document.all[object].style.posLeft += x;
document.all[object].style.posTop += y;
}
}
//--></SCRIPT>
<STYLE TYPE="text/css"><!--
.myStyle {
position: absolute;
visibility: hidden;
}
//--></STYLE>
<A HREF="#" onMouseover="show('text1')"
onMouseout="hide('text1')">Reveal layer 1</A>
<BR>
<A HREF="#" onMouseover="show('text2')"
onMouseout="hide('text2')">Reveal layer 2</A>
<BR>
<A HREF="#" onMouseover="show('text3')"
onMouseout="hide('text3')">Reveal layer 3</A>
<BR>
<SPAN ID="text1" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
Heres<BR>some<BR><B>bold<BR>text</B><BR>in<BR>a<BR>layer
</TD></TR></TABLE>
</SPAN>
<SPAN ID="text2" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
Heres<BR>some<BR><I>italic<BR>text</I><BR>in<BR>a<BR>layer
</TD></TR></TABLE>
</SPAN>
<SPAN ID="text3" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
Heres<BR>some<BR><FONT
COLOR="#FF0000">red<BR>text</FONT><BR>in<BR>a<BR>layer
</TD></TR></TABLE>
</SPAN>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
reposition('text1',100,-60);
reposition('text2',100,-60);
reposition('text3',100,-60);
//--></SCRIPT>
|
Return
Source code for Example 10
<SPAN ID="box" STYLE="position:absolute; width:300; height:200;">
<TABLE WIDTH="300" HEIGHT="200" BORDER="0" BGCOLOR="#FFCC00"
CELLSPACING="0">
<TR><TD> </TD></TR></TABLE>
</SPAN>
<SPAN ID="sphere" STYLE="position:absolute; width:43; height:43;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
if (document.all) {
document.all('box').style.posLeft = 50;
document.all('box').style.posTop = 50;
document.all('sphere').style.posLeft = 50;
document.all('sphere').style.posTop = 50;
}
else if (document.layers) {
document.layers['box'].left = 50;
document.layers['box'].top = 50;
document.layers['sphere'].left = 50;
document.layers['sphere'].top = 50;
}
var xInc=12, yInc=12;
var xOld=xMin=50, yOld=yMin=50;
var xMax=350, yMax=250;
function moveit() {
if ((xOld + xInc) >= (xMax-43) || (xOld + xInc) < xMin) xInc *= -1;
if ((yOld + yInc) >= (yMax-43) || (yOld + yInc) < yMin) yInc *= -1;
if (document.all) {
document.all('sphere').style.posLeft = xOld += xInc;
document.all('sphere').style.posTop = yOld += yInc;
}
else if (document.layers) {
document.layers['sphere'].left = xOld += xInc;
document.layers['sphere'].top = yOld += yInc;
}
setTimeout("moveit()",5);
}
if (document.all || document.layers)
setTimeout("moveit()",1000);
//--></SCRIPT>
|
Return
Source code for Example 11
<SPAN ID="box1" STYLE="position:absolute; width:300; height:200;">
<TABLE WIDTH="300" HEIGHT="200" BORDER="0" CELLSPACING="0">
<TR>
<TD BGCOLOR="#FFAA00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFAA00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFAA00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFAA00"> </TD>
</TR>
</TABLE>
</SPAN>
<SPAN ID="sphere" STYLE="position:absolute; width:43; height:43;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>
<SPAN ID="box2" STYLE="position:absolute; width:300; height:200;">
<TABLE WIDTH="300" HEIGHT="200" BORDER="0" CELLSPACING="0">
<TR>
<TD> </TD>
<TD BGCOLOR="#FFCC00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFCC00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFCC00"> </TD>
<TD> </TD>
</TR>
</TABLE>
</SPAN>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
if (document.all) {
document.all('box1').style.posLeft = 50;
document.all('box1').style.posTop = 50;
document.all('box2').style.posLeft = 50;
document.all('box2').style.posTop = 50;
document.all('sphere').style.posLeft = 50;
document.all('sphere').style.posTop = 50;
document.all('box1').style.zIndex = 10;
document.all('box2').style.zIndex = 30;
document.all('sphere').style.zIndex = 20;
}
else if (document.layers) {
document.layers['box1'].left = 50;
document.layers['box1'].top = 50;
document.layers['box2'].left = 50;
document.layers['box2'].top = 50;
document.layers['sphere'].left = 50;
document.layers['sphere'].top = 50;
document.layers['box1'].zIndex = 10;
document.layers['box2'].zIndex = 30;
document.layers['sphere'].zIndex = 20;
}
var xInc=12, yInc=12;
var xOld=xMin=50, yOld=yMin=50;
var xMax=350, yMax=250;
function moveit() {
if ((xOld + xInc) >= (xMax-43) || (xOld + xInc) < xMin) xInc *= -1;
if ((yOld + yInc) >= (yMax-43) || (yOld + yInc) < yMin) yInc *= -1;
if (document.all) {
document.all('sphere').style.posLeft = xOld += xInc;
document.all('sphere').style.posTop = yOld += yInc;
}
else if (document.layers) {
document.layers['sphere'].left = xOld += xInc;
document.layers['sphere'].top = yOld += yInc;
}
setTimeout("moveit()",5);
}
if (document.all || document.layers)
setTimeout("moveit()",1000);
var swapped = false;
function swap() {
if (document.all) {
if (swapped) {
document.all('box1').style.zIndex = 10;
document.all('box2').style.zIndex = 30;
}
else {
document.all('box1').style.zIndex = 30;
document.all('box2').style.zIndex = 10;
}
}
else if (document.layers) {
if (swapped) {
document.layers['box1'].zIndex = 30;
document.layers['box2'].zIndex = 10;
}
else {
document.layers['box1'].zIndex = 10;
document.layers['box2'].zIndex = 30;
}
}
swapped = !swapped;
}
//--></SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Swap" onClick="swap()">
</FORM>
|
Return
Source code for Example 12
<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>
|
Articles | Dynamic Positioning
Source Code|
back
|
|
|
|
|
|
