经典论坛 - Powered by Discuz! Board

<html>
<head>
<title>DOM Viewer</title>
<head>
<style type="text/css">
* {
	font-family: arial, verdana, sans-serif
	}

a.object {
  color: #0000ff;
  text-decoration: underline;
  cursor: pointer;
}
body {
	background-color: #efefe9;
	}
h1 {
	font-size: 16pt;
	margin-bottom:2px;
	}
h2 {
	font-size: 14pt;
	margin-bottom:2px;
	}
h3 {
	font-size: 12pt;
	font-weight: 500;
	text-indent: 12px;
	margin-bottom:2px;
	}
li {
  white-space: nowrap;
  padding: 0px;
}

ul {
  list-style-type: square;
  margin-left: 0px;
  padding-left: 1.5em;
}
li li {
  list-style-type: disc;
  margin-left: 0px;
  padding-left: 1.5em;
}
li li li{
  list-style-type: circle;
  margin-left: 0px;
  padding-left: 1.5em;
}

li li li li li {
  list-style-type: square;
  margin-left: 0px;
  padding-left: 1.5em;
}

</style> <script type="text/JavaScript"> 
var isNS6 = (navigator.userAgent.indexOf("Gecko") > 0) ? 1 : 0;
var isIE5 = (navigator.appVersion.indexOf("MSIE 5") > 0) ? 1 : 0;
var OPERA = (navigator.userAgent.indexOf("Opera") > 0) ? true : false;
// Array for tracking objects to expand or collapse.

var objectList = new Array();

function showProperties(obj, name) {

var i, s;
  var propertyList, temp;
  var property, value;
  var lines;

if (!name && obj && obj.id)
    name = obj.id;

// Netscape: Special handling for objects of type [object CSSStyleRule] due
  // to browser bugs. Note that 'parentRule' is inaccessible and 'selectorText'
  // always returns null.

if (isNS6 && String(obj) == "[object CSSStyleRule]") {
    objectList[objectList.length] = obj.parentStyleSheet;
    objectList[objectList.length] = obj.style;
    return "<ul>"
      + "<li>" + name + ".cssText = " + obj.cssText + "</li>"
      + "<li>" + name + ".selectorText = " + obj.selectorText + "</li>"
      + "<li>" + name + ".parentRule = <i>inaccessible</i></li>"
      + "<li>" + name + ".parentStyleSheet = "
      + makeLink(objectList.length - 2, name + ".parentStyleSheet",
                 String(obj.parentStyleSheet)) + "</li>"
      + "<li>" + name + ".style = "
      + makeLink(objectList.length - 1, name + ".style",
                 String(obj.style)) + "</li>"
      + "<li>" + name + ".type = " + obj.type + "</li>"
      + "</ul>";
  }

// Create a list of the object's properties sorted alphabetically by name so
  // they can be listed in an easy to read order.

propertyList = new Array;
  for (property in obj)
    propertyList[propertyList.length] = String(property);
  propertyList.sort();

// Build a list of properties and values for this object as a string of
  // HTML.

s = "<ul>";

for (i = 0; i < propertyList.length; i++) {
    property = String(propertyList[i]);
    value = String(obj[propertyList[i]]);

// If the object property is itself an object, create it as a link so it's
    // properties can be expanded or collapsed.

if (value.indexOf("[object") >= 0) {
      objectList[objectList.length] = obj[propertyList[i]];
      value = makeLink(objectList.length - 1, name + "." + property, value);
    }

// If the property text contains HTML, encode it for display.

if (property == "innerHTML" || property == "outerHTML") {
      var lines = value.split("\n");
      value = "";
      for (j = 0; j < lines.length; j++) {
        lines[j] = lines[j].replace(/(.?)<(.?)/g, "$1&lt;$2");
        lines[j] = lines[j].replace(/(.?)>(.?)/g, "$1&gt;$2");
        value += lines[j];
      }
    }

// Add property as a list item.

s += "<li>" + name + "." + property + " = " + value + "</li>";

// Netscape: Enumerate each element in an array property (note: IE provides
    // individual array elements using the index number as the property name).

if (isNS6 && obj.propertyIsEnumerable(String(property)))
      for (j = 0; j < parseInt(value, 10); j++) {
        objectList[objectList.length] = obj[j];
        temp = makeLink(objectList.length - 1, name + "[" + j + "]",
                         String(obj[j]));
        if (obj[j])
          s += "<li>" + name + "[" + j + "] " + temp + "</li>";
      }
  }

s += "</ul>";
  return s;
}

function makeLink(i, name, text) {

return '<a class="object" href="javascript:cancelEvt(event)" onclick="'
       + 'if (!this.isExpanded)'
       + 'createList(this,objectList[' + i + '],\'' + name + '\');'
       + 'else destroyList(this);event.cancelBubble=true;return false;">'
       + text + '</a>';
}

function createList(target, obj, name) {

var node;

// Generate property list and append it to document after the current node.

node = document.createElement("SPAN");
  node.innerHTML = showProperties(obj, name);
  target.parentNode.appendChild(node);
  target.isExpanded = true;
}

function destroyList(target) {

// Remove a generated property list from the document.

target.parentNode.removeChild(target.parentNode.lastChild);
  target.isExpanded = false;
}

</script> </head> <body>  <h1>DOM Viewer</h1>
<script type="text/JavaScript">
// Show properties for the specified object in the opening window. Default to
// the document if no object is specified.

var DOMViewerObj  = window.document;
var DOMViewerName = "document";

if (!DOMViewerObj) {
  DOMViewerObj = window.document;
  DOMViewerName = "document";
}

document.writeln("<h2>You clicked: &lt;"+DOMViewerName+" id=\""+DOMViewerObj.id+"\"...<\/h2>");
document.writeln("<h3>Properties:<\/h3>");

document.writeln(showProperties(DOMViewerObj, DOMViewerObj.id));

function cancelEvt(e){
	if(window.event) window.event.returnValue= false;
	else if(e && e.preventDefault) e.preventDefault();
	else return false;
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

<html>
<head>
<title>Greeting Card Designer</title>

.title {  font-family: Verdana;
        font-size: 13pt; font-weight: bold;
        color: #FFFFFF;}
.lpane {  position:absolute;
        width:144px;  height:408px; z-index:1;
        top: 34px; left: 6px;
        background: #FFFFFF;
        border-right:2px solid  #99CCFF;
        border-top:2px solid #333366;
        border-left:2px solid #333366;
        border-bottom:2px solid #99CCFF;}
.layout { position:absolute;
        width:443px; height:408px; z-index:1;
        top: 34px; left: 157px;
        background-color: #999999;
        border-right:2px solid  #99CCFF;
        border-top:2px solid #333366;
        border-left:2px solid #333366;
        border-bottom:2px solid #99CCFF;}
.card  { position:absolute;
        width:375px; height:225px; z-index:2;
        left: 32px; top: 85px;
        background-color: #FFFFFF;
        layer-background-color: #FFFFFF;
        border: 1px solid #000000; padding:15;
         overflow:hidden;}
.cardshadow  { position:absolute;
        width:375px; height:225px; z-index:1;
        left: 32px; top: 85px;
        background: #000000; border: 1px solid #000000;
        FILTER: progid:DXImageTransform.Microsoft.CrBlur(
                PixelRadius=3,
                MakeShadow=true,
                ShadowOpacity=.30);}
.rpane { position:absolute;
        width:144px; height:408px; z-index:1;
        top: 34px; left: 608px;
        background:#666666;
        layer-background-color: #FFFFFF;
        border-right:2px solid  #99CCFF;
        border-top:2px solid #333366;
        border-left:2px solid #333366;
        border-bottom:2px solid #99CCFF;
        padding:5px;}
.bar { position:absolute;
        width:746px; height:20px; z-index:2;
        top: 446px; left: 6px; padding:5px;}
.bar A:link {text-decoration:none; color:white}
.bar A:visited {text-decoration:none; color:white}
.bar A:active {text-decoration:none; color:white}
.bar A:hover {text-decoration:none; color:yellow}
.wbox{ background-color: #FFFFFF;
        border:1px solid #000000; z-index:2;}
.button1{ height:20px;
        background:#666666;
        font-family:verdana; color:white;
        font-size:8pt; font-weight:bold;
        padding:1px; padding-left:5px;
        border-bottom:1px solid #999999;
        cursor:hand; }
.textRegion{ height:20px;
        background:#666666;
        font-family:verdana; color:white;
        font-size:8pt;
        padding:1px; padding-left:5px;
        border-bottom:1px solid #999999;}
.swatch{ height:20px; width:20px;
        margin:5px; border:1px solid black;
        cursor:hand;}

</style>

<SCRIPT language=javascript>

var gsCurrentControlSet = null;

var giLastImg = '1';
var giLastTxt = '1';

function fnInit(){
    gsCurrentControlSet=oSizeControls;

for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "on";

card.unselectable = "off";
    card.contentEditable='true';
    document.execCommand("2D-Position", true, true);
    document.execCommand("MultipleSelection", true, true);
    document.execCommand("LiveResize", true, true);
}

function fnToggleOptions(sControlSet){

if (gsCurrentControlSet != sControlSet){
      gsCurrentControlSet.style.display = "none";
      sControlSet.style.display = "block";
      gsCurrentControlSet = sControlSet;
    }
}

function fnChangeSize(oWidth, oHeight, oTop, oLeft) {
   card.style.width=oWidth;
   cardshadow.style.width=oWidth;
   card.style.height=oHeight;
   cardshadow.style.height=oHeight;
   card.style.top=oTop;
   cardshadow.style.top=oTop;
   card.style.left=oLeft;
   cardshadow.style.left=oLeft;
}

function fnChangeStyle() {
    if (event.srcElement.className == "swatch") {
        card.style.background=event.srcElement.style.background;
        card.style.filter=event.srcElement.style.filter;
    }
}

function fnInsertImage(oImgId,oImgSrc)
{
    var oNode=document.createElement("img");
    card.insertBefore(oNode);
    oNode.src=oImgSrc;
    giLastImg++;
    var iTempCount = oImgId + giLastImg;
    oNode.id = iTempCount;
    oNode.style.position='absolute';

var oControlRange = document.body.createControlRange();
    oControlRange.add(oNode);
    oControlRange.select();
}

function fnInsertText(oTxtId,oTxtFont) {
    var oNode=document.createElement("div");
    card.insertBefore(oNode);
    oNode.style.fontFamily=oTxtFont;
    oNode.innerText='Enter some text here';
    giLastTxt++;
    var iTempCount = "text" + giLastTxt;
    oNode.id = iTempCount;
    oNode.style.position='absolute';

oNode.setActive()
}

function fnChangeFontSize(){
  if (document.selection.type == "Control") {
    var oControlRange = document.selection.createRange();
    for (i = 0; i < oControlRange.length; i++)
      if (oControlRange(i).tagName != "IMG")
        oControlRange(i).style.fontSize=event.srcElement.style.fontSize;
  }
}

function fnChangeFontFamily    (){
  if (document.selection.type == "Control"){
    var oControlRange = document.selection.createRange();
    for (i = 0; i < oControlRange.length; i++)
      if (oControlRange(i).tagName != "IMG")
       oControlRange(i).style.fontFamily=event.srcElement.style.fontFamily;
  }
}

function fnChangeFontColor    (){
  if (document.selection.type == "Control") {
    var oControlRange = document.selection.createRange();
    for (i = 0; i < oControlRange.length; i++)
      if (oControlRange(i).tagName != "IMG")
        oControlRange(i).style.color=event.srcElement.style.backgroundColor;
  }
}

</SCRIPT>
</HEAD>

<DIV ID="title" CLASS="title" STYLE="position:absolute; width:747px;
     height:28px; z-index:2; top:5px; left:5px">Greeting Card Designer</DIV>

<DIV ID="leftpane" CLASS="lpane">
    <DIV CLASS="button1" onclick="fnToggleOptions(oSizeControls);">
        Size</DIV>
    <DIV CLASS="button1" onclick="fnToggleOptions(oBackgroundControls);">
        Background Style</DIV>
    <DIV CLASS="button1" onclick="fnToggleOptions(oTextControls);">
        Text</DIV>
    <DIV CLASS="button1" onclick="fnToggleOptions(oImageControls);">
        Images</DIV>
    </BR></BR></BR></BR>
    <DIV CLASS="textRegion">
        </BR></BR></BR></BR>Right-click <B>here</B> and select
        <B>View Source</B> to see how it's done.</BR></BR></BR></BR></BR></DIV>
</DIV>

<DIV ID="oSizeControls" CLASS="rpane" ALIGN="center" STYLE="display:block;">
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Size:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:8pt; padding:5px">Choose the dimensions of your
        card by clicking on a size below:</DIV>
    <BR>
    <DIV ID="cardsize1" CLASS="wbox" STYLE="width:100; height:65;
        padding:5px; margin:10px; cursor:hand;"
        onclick="fnChangeSize('375','225','85','32');" >4" x 6"</DIV>
    <DIV ID="cardsize2" CLASS="wbox" STYLE="width:100; height: 100;
        padding:5px; margin:10px; cursor:hand;"
        onclick="fnChangeSize('375','375','5','32');">6" x 6"</DIV>
    <DIV ID="cardsize3" CLASS="wbox" STYLE="width:70; height: 100;
        padding:5px; margin:10px; cursor:hand;"
        onclick="fnChangeSize('275','375','8','75');">6" x 4"</DIV>
</DIV>

<DIV ID="oTextControls" CLASS="rpane" ALIGN="left"
        STYLE="display:none; padding:5px">
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Text:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:8pt; padding:5px">Insert, edit, or reposition text regions.
    </DIV><BR/>
    <button onclick="fnInsertText('georgia')">Insert Text</button><BR/>

<SPAN  onclick="fnChangeFontSize();">
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:22pt; font-weight:normal; color:white">Large</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:15pt; font-weight:normal; color:white">Medium</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:10pt; font-weight:normal; color:white">small</DIV>
    </SPAN><BR/>

<SPAN  onclick="fnChangeFontFamily();">
        <DIV STYLE="height: 25px; cursor:hand; font-family:times;
            font-size:14pt; font-weight:normal; color:white">Times</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:arial;
            font-size:14pt; font-weight:normal; color:white">Arial</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
            font-size:14pt; font-weight:normal; color:white">Georgia</DIV>
        <DIV STYLE="height: 25px; cursor:hand; font-family:verdana;
            font-size:14pt; font-weight:normal; color:white">Verdana</DIV>
    </SPAN><BR/>

<SPAN  onclick="fnChangeFontColor();">
        <SPAN CLASS="swatch" STYLE="background:black">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:#666666">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:#cccccc">
        </SPAN>
        <SPAN CLASS="swatch" STYLE="background:white">
        </SPAN><BR/>

<DIV ID="oImageControls" CLASS="rpane" ALIGN="center"
    STYLE="display:none; padding:5px; overflow:auto">
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Images:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt;
        padding:5px">Select image to insert, then position or re-size.</DIV>

<DIV ID="oBackgroundControls" CLASS="rpane" ALIGN="center" STYLE="display:none"
    onclick="fnChangeStyle();">

<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
        font-size:10pt; padding:1px; font-weight:bold">Background:</DIV>
    <DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt;
        padding:5px">Choose a color or gradient from the styles below.</DIV>
    <BR/>

<SPAN CLASS="swatch" STYLE="background:black" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:#666666" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:#cccccc" ></SPAN>
    <SPAN CLASS="swatch" STYLE="background:white" ></SPAN><BR/>

<SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='0');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='1');">
    </SPAN>
    <SPAN CLASS="swatch" STYLE="background:lightskyblue;
        filter:progid:DXImageTransform.Microsoft.Gradient(
        endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='0');">
    </SPAN><BR/>

<DIV CLASS="bar" >
   <A href="http://www.microsoft.com/misc/cpyright.htm" target=_top>
      &#169;2001 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

<STYLE>
.menu1 {display: none; position: absolute; width: 150; background-color: #CFCFCF; border: "1 solid"; border-top-color: #CFCFCF; border-left-color: #CFCFCF; border-bottom-color: #000000; border-right-color: #000000;}
.menu2 {padding-left: 10; width: 150; background-color: #CFCFCF; border: "1 solid"; border-top-color: #FFFFFF; border-left-color: #FFFFFF; border-right-color: #909090; border-bottom-color: #909090;}
.menuitem {cursor: hand; background-color: #CFCFCF; font-size: 8pt; font-family: Arial; width: 130; color: #000000;}
.menuitem2 {cursor: hand; background-color: #0000FF; color: #FFFFFF; font-size: 8pt; font-family: Arial; width: 130;}
LI {cursor: hand; font-size: 8pt; font-family: Arial;}
.nodedata {font-size: 8pt; font-family: Arial; border: "1 solid"; background-color: #505050; border-top-color: #C0C0C0; border-left-color: #C0C0C0; border-bottom-color: #000000; border-right-color: #000000;}
TD.data {background-color: #CFCFCF; border: "1 solid"; border-top-color: #EFEFEF; border-left-color: #EFEFEF; border-right-color: #C0C0C0; border-bottom-color: #C0C0C0;}
TD.sample {font-size: 8pt; font-family: Arial;}
</STYLE>

<SCRIPT>
window.onload=fnInit;
var oLastNode="";
var oCurrentNode="";
var oCopyNode="";
var oCreateNode="";
var oFlashItem="";
var oRemoveNode="";
var sCurrentAction="";
var iNewCount=0;
function fnInit(){
	oMenu.context=false;
	document.oncontextmenu=fnContextMenu;
}

oWorkItem.className="menuitem";
			oWorkItem.item_status="dull";
		}
		else{
			if(oWorkItem.item_status=="moving"){
				alert("hit?");
			}
			oFlashItem=oWorkItem;
			oWorkItem.className="menuitem2";
			oWorkItem.item_status="flash";
		}
	}
}

function fnHandler(){
	var oWorkItem=event.srcElement;
	if(oFlashItem.item_status=="flash"){
//		oFlashItem.item_status="moving";
		if(oWorkItem.nodeName=="#text"){
			oWorkItem=oWorkItem.parentNode;
		}
		
		oMenu.style.display="none";
		oMenu.context=false;

//		alert(oFlashItem.className + "\n" + oFlashItem.menu_action);
		sCurrentAction=oFlashItem.menu_action;
		var sAction="fn" + oFlashItem.menu_action + "(oCurrentNode)";
		eval(sAction);
		oFlashItem.className="menuitem";
//		event.returnValue=false;
	}
}

}
function fnPasteAfter(oNode){
	if(oCopyNode!=""){
		oNode.parentNode.appendChild(oCopyNode);
		oCopyNode=oCopyNode.cloneNode(true);
		window.status="pasted and re-cloned the " + oNode.tagName + " node";
	}
	else{
		window.status="Invalid node clone.";
	}
}

<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">

</HEAD>

<H1>Interactive Document Tree Sample</H1>

<P>This sample demonstrates how the DOM implementation in Internet Explorer can be used to manipulate portions of the document tree. Click one of the nodes in the sample tree to query the different properties displayed in the gray table. Right-click one of the nodes for a special context menu that allows you to copy, paste, create, and remove a selected node. These features are valid only within the sample tree, which is available between the two horizontal rules.</P>

<TABLE WIDTH="100%" CLASS="nodedata">
<TR><TD CLASS="data" COLSPAN=3 ALIGN=center>Parent Node: <SPAN ID="oParentText"></SPAN></TD></TR>
<TR><TD CLASS="data" WIDTH="33%">Previous Sibling: <SPAN ID="oPrevSibText"></SPAN></TD><TD CLASS="data" WIDTH="33%"><b>Selected Node</b>: <SPAN ID="oCurrentText"></SPAN></TD><TD CLASS="data" WIDTH="33%">Next Sibling: <SPAN ID="oNextSibText"></SPAN></TD></TR>
<TR><TD CLASS="data">First Child: <SPAN ID="oFirstChildText"></SPAN></TD><TD CLASS="data">Children: <SPAN ID="oChildText"></SPAN></TD><TD CLASS="data">Last Child: <SPAN ID="oLastChildText"></SPAN></TD></TR>
</TABLE>

<h3>Sample Tree</h3>
<hr>
<DIV onclick="fnGetData()" onselectstart="fnTrapSelect()">
<UL group="dom_sample">
<LI group="dom_sample">Node 1
<LI group="dom_sample">Node 2
<UL group="dom_sample">
<LI group="dom_sample">Sub Node 1
<LI group="dom_sample">Sub Node 2
<LI group="dom_sample">Sub Node 3
</UL>
<LI group="dom_sample">Node 3
<UL>
<LI group="dom_sample"><TABLE BORDER=1 group="dom_sample"><TR group="dom_sample"><TD CLASS="sample" group="dom_sample">Table Cell 1</TD><TD CLASS="sample" group="dom_sample">Table Cell 2</TD></TR></TABLE>
</UL>
</UL>
<FORM group="dom_sample">
<LABEL STYLE="cursor: hand; background-color: #CFCFCF; font-size: 8pt; font-family: Arial;" group="dom_sample">First Name:</LABEL><INPUT STYLE="cursor: hand; font-size: 8pt; font-family: Arial;" TYPE=text group="dom_sample" ID=oFirstName>
<INPUT TYPE=button STYLE="cursor: hand; font-size: 8pt; font-family: Arial;" VALUE="Submit" group="dom_sample">
</FORM>
</DIV>
<hr>
<DIV group="dom_sample" ID="oMenu" CLASS="menu1">
<DIV group="dom_sample" onmouseover="fnFlash()" onmouseout="fnFlash()" onclick="fnHandler()" ID="oContainer" CLASS="menu2">
<SPAN group="dom_sample" item_status="dull" menu_action="Copy" CLASS="menuitem">Copy Node</span>
<SPAN group="dom_sample" item_status="dull" menu_action="PasteBefore" CLASS="menuitem">Paste Before Node</span>
<SPAN group="dom_sample" item_status="dull" menu_action="PasteAsChild" CLASS="menuitem">Paste Node As Child</span>
<SPAN group="dom_sample" item_status="dull" menu_action="PasteAfter" CLASS="menuitem">Paste After Node</span>
<SPAN group="dom_sample" item_status="dull" menu_action="Remove" CLASS="menuitem">Remove Node</span>
<SPAN group="dom_sample" item_status="dull" menu_action="Create" CLASS="menuitem">Create Node</span>
</DIV>
</DIV>

<BR><BR><BR>
&copy; <A CLASS="clsIncCpyRt" HREF="/isapi/gomscom.asp?target=/misc/cpyright.htm" TARGET="_top">Microsoft Corporation. All rights reserved. Terms of use</A>.
</BLOCKQUOTE>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

var STATE_COPY_INPUT		= 100
	var STATE_READLEN		= 101
	var STATE_DECODE		= 102
	var STATE_UNESCAPE		= 103

var pick_encoding = new Array(
		1, 2, 0, 1, 2, 0, 2, 0, 0, 2, 0, 2, 1, 0, 2, 0,
		1, 0, 2, 0, 1, 1, 2, 0, 0, 2, 1, 0, 2, 0, 0, 2,
		1, 1, 0, 2, 0, 2, 0, 1, 0, 1, 1, 2, 0, 1, 0, 2,
		1, 0, 2, 0, 1, 1, 2, 0, 0, 1, 1, 2, 0, 1, 0, 2
	)

var rawData = new Array(
		0x64,0x37,0x69, 0x50,0x7E,0x2C, 0x22,0x5A,0x65, 0x4A,0x45,0x72,
		0x61,0x3A,0x5B, 0x5E,0x79,0x66, 0x5D,0x59,0x75, 0x5B,0x27,0x4C,
		0x42,0x76,0x45, 0x60,0x63,0x76, 0x23,0x62,0x2A, 0x65,0x4D,0x43,
		0x5F,0x51,0x33, 0x7E,0x53,0x42, 0x4F,0x52,0x20, 0x52,0x20,0x63,
		0x7A,0x26,0x4A, 0x21,0x54,0x5A, 0x46,0x71,0x38, 0x20,0x2B,0x79,
		0x26,0x66,0x32, 0x63,0x2A,0x57, 0x2A,0x58,0x6C, 0x76,0x7F,0x2B,
		0x47,0x7B,0x46, 0x25,0x30,0x52, 0x2C,0x31,0x4F, 0x29,0x6C,0x3D,
		0x69,0x49,0x70, 0x3F,0x3F,0x3F, 0x27,0x78,0x7B, 0x3F,0x3F,0x3F,
		0x67,0x5F,0x51, 0x3F,0x3F,0x3F, 0x62,0x29,0x7A, 0x41,0x24,0x7E,
		0x5A,0x2F,0x3B, 0x66,0x39,0x47, 0x32,0x33,0x41, 0x73,0x6F,0x77,
		0x4D,0x21,0x56, 0x43,0x75,0x5F, 0x71,0x28,0x26, 0x39,0x42,0x78,
		0x7C,0x46,0x6E, 0x53,0x4A,0x64, 0x48,0x5C,0x74, 0x31,0x48,0x67,
		0x72,0x36,0x7D, 0x6E,0x4B,0x68, 0x70,0x7D,0x35, 0x49,0x5D,0x22,
		0x3F,0x6A,0x55, 0x4B,0x50,0x3A, 0x6A,0x69,0x60, 0x2E,0x23,0x6A,
		0x7F,0x09,0x71, 0x28,0x70,0x6F, 0x35,0x65,0x49, 0x7D,0x74,0x5C,
		0x24,0x2C,0x5D, 0x2D,0x77,0x27, 0x54,0x44,0x59, 0x37,0x3F,0x25,
		0x7B,0x6D,0x7C, 0x3D,0x7C,0x23, 0x6C,0x43,0x6D, 0x34,0x38,0x28,
		0x6D,0x5E,0x31, 0x4E,0x5B,0x39, 0x2B,0x6E,0x7F, 0x30,0x57,0x36,
		0x6F,0x4C,0x54, 0x74,0x34,0x34, 0x6B,0x72,0x62, 0x4C,0x25,0x4E,
		0x33,0x56,0x30, 0x56,0x73,0x5E, 0x3A,0x68,0x73, 0x78,0x55,0x09,
		0x57,0x47,0x4B, 0x77,0x32,0x61, 0x3B,0x35,0x24, 0x44,0x2E,0x4D,
		0x2F,0x64,0x6B, 0x59,0x4F,0x44, 0x45,0x3B,0x21, 0x5C,0x2D,0x37,
		0x68,0x41,0x53, 0x36,0x61,0x58, 0x58,0x7A,0x48, 0x79,0x22,0x2E,
		0x09,0x60,0x50, 0x75,0x6B,0x2D, 0x38,0x4E,0x29, 0x55,0x3D,0x3F
	)

var transformed = new Array()
	for (var i=0; i<3; i++)	transformed[i] = new Array()
	for (var i=31; i<=126; i++)	for (var j=0; j<3; j++)	transformed[j][rawData[(i-31) * 3 + j]] = (i==31) ? 9 : i
	
	var digits = new Array()
	for (var i=0; i<26; i++)
	{
		digits["A".charCodeAt(0)+i] = i
		digits["a".charCodeAt(0)+i] = i+26
	}
	for (var i=0; i<10; i++)	digits["0".charCodeAt(0)+i] = i+52
	digits[0x2b] = 62
	digits[0x2f] = 63

function unescape(char)
	{
		var escapes = "#&!*$"
		var escaped = "\r\n<>@"

if (char.charCodeAt(0) > 126)	return char
		if (escapes.indexOf(char) != -1)	return escaped.substr(escapes.indexOf(char), 1)
		return "?"
	}
	
	function decodeBase64(string)
	{
		var val = 0
		val +=  (digits[string.substr(0,1).charCodeAt(0)] << 2)
		val +=  (digits[string.substr(1,1).charCodeAt(0)] >> 4)
		val +=  (digits[string.substr(1,1).charCodeAt(0)] & 0xf) << 12
		val += ((digits[string.substr(2,1).charCodeAt(0)] >> 2) << 8)
		val += ((digits[string.substr(2,1).charCodeAt(0)] & 0x3) << 22)
		val +=  (digits[string.substr(3,1).charCodeAt(0)] << 16)
		return val
	}

提示：您可以先修改部分代码再运行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Loading HTML</title>
<style>
*	{	font-size: 12px; line-height: 150%; cursor: default; color: #999999}
</style>
<script>
function percentDownload(dWindow, dURL)
{
	loadingWin = dWindow
	loadingDoc = loadingWin.document
	loadingUrl = dURL
	allElement = 0
	html_percent = 20
	try{delete percent} catch(e){}
	if (loadingDoc)		document.documentElement.addBehavior("#default#download")
	document.documentElement.startDownload(loadingUrl, new Function("downloadInit(arguments[0])"))
}

function downloadInit(content)
{
	//var re = /<(.*)>/gi
	//allElement = content.match(re).length
	loadingDoc.open()
	loadingDoc.write(content)
	allElement = loadingDoc.all.length
	setPercent()
	loadingDoc.close()
	loadingWin.location = loadingUrl
	loadContent = content
	html_downloading = "loading"
}

function setPercent()
{
	percent		= new Array()
	collections	= new Array()
	collections[collections.length]	= "applets"
	collections[collections.length]	= "embeds"
	collections[collections.length]	= "frames"
	collections[collections.length]	= "images"
	collections[collections.length]	= "scripts"
	
	for (var i=0; i<collections.length; i++)
	{
		oItem = collections[i]
		percent[percent.length] = eval("loadingDoc." + oItem + ".length")
	}
	
	resetPercent(percent, html_percent)
}

function getNowPercent()
{
	try{percent[0]}	catch(e){this.state = "uninitialized"; return this}
	
	this.percentValue = 0
	this.url = loadingDoc.location.href
	this.state = loadingDoc.readyState
	this.colls = new Array()
	
	this.percentValue = Math.round(loadingDoc.all.length / allElement * html_percent)
	if (this.percentValue > 20)	this.percentValue = 20

var collObj
	for (var i=0; i<collections.length; i++)
	{
		collObj = eval("new getCollPercent('" + collections[i] + "')")
		this.percentValue += (collObj.collPercent * (percent[i] == 0 ? 1 : percent[i]) / 100)
		this.colls[collections[i]] = collObj
	}
	
	return this
}

function resetPercent(percentArray, html_percent)
{
	if (!html_percent)	html_percent = 0
	var max_percent	= 0
	var correct_value = otherPercent = 100 - html_percent

for (var i=0; i<percentArray.length; i++)  max_percent += percent[i]
	for (var i=0; i<percentArray.length; i++)
	{
		percentArray[i] = Math.round(percent[i] / max_percent * otherPercent)
		correct_value -= percentArray[i]
	}

for (var i=0; correct_value != 0; ((i++ > percentArray.length) ? i=0 : i))
	{
		if (percentArray[i]-1 >= 0 && percentArray[i]+1 <= otherPercent)
		{
			percentArray[i]	+= correct_value / Math.abs(correct_value)
			correct_value	-= correct_value / Math.abs(correct_value)
		}
	}
}

<body bgcolor="#FFFFFF" style="overflow: hidden" onselectstart="return false" topmargin=5 leftmargin=5>
<table id=loading width="178" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr><td align="center" valign="top" style="background: #EEEEEE; border:1 dotted #999999; line-height:200%">
<span id=loading_state style="color: #545454">初始化程序</span>
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#D5D5D5"> 
<table id="percent_line" width="0%" height="8" border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="#FF1212"></td></tr></table>
</td>
</tr>
</table>
<span id=percent_number style="color:#181C29">0%</span>
</td>
</tr>
<tr><td height=100% valign="top" style="padding-top: 5; color: #999999">
页面地址： <span id=page_url></span><br>
页面状态： <span id=page_state></span><br>

<fieldset id="applet" style="width:100%; border-color: #D5D5D5; border-style: solid; border-width: 1" align="center" noshade>
<legend style="color: #545454">&nbsp;APPLET&nbsp;</legend>
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td style="padding-left: 5">数量</td><td id="all" align="right" style="padding-right: 5">&nbsp;</td></tr>
<tr><td style="padding-left: 5">载入</td><td id="loaded" align="right" style="padding-right: 5">&nbsp;</td></tr>
<tr><td style="padding-left: 5">百分比</td><td id="loadPercent" align="right" style="padding-right: 5">&nbsp;</td></tr>
</table>
</fieldset>

提示：您可以先修改部分代码再运行

<html>
<head>
<meta http-equiv=Pragma content=no-cache>
<meta http-equiv=Expires content=0>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<title>Yahoo! Media Helper</title>
</head>

<font face=arial,helvetica style="font-size:12pt">
检测媒体播放器版本...
</font>
<br>
<table height=120 border=0>
<tr valign=bottom><td><font face=arial,helvetica size=-2 style="font-size:9pt">Copyright &copy;2002 Yahoo! Inc.  All Rights Reserved.</font></td></tr>
</table>

</center>

setTimeout("firewall()", 45000);
</script>

<SCRIPT LANGUAGE="VBScript">
function rpexists()
  on error resume next
  rpexists = (NOT IsNull(RealPlayer.SetSource("")))
end function
</SCRIPT>

<SCRIPT LANGUAGE="VBScript">
function qtexists()
  on error resume next
  qtexists = (NOT IsNULL(CreateObject("QuickTimeCheckObject.QuickTimeCheck.1")))
end function
</SCRIPT>

<SCRIPT LANGUAGE="VBScript">
function flashexists()
  on error resume next
  vTest = false
  Set FlashObject = CreateObject("ShockwaveFlash.ShockwaveFlash")
  vTest = (NOT IsNull(FlashObject.SetVariable("testName","testValue")))
  if (vTest) then
    flashexists = "4.0"
  else
    flashexists = false
  end if
end function
</SCRIPT>

if (os != "Windows")
    yp = false;

if (typeof(YPlayer) == "undefined") {
    yp = false;
    return;
  }

if (!ypexists())
    yp = false;
  else {
    yp = "";
    var v = YPlayer.YPlayerVersion;
    var s = v.indexOf("Product=");
    var e = v.indexOf("File=");
    var vs = v.substring(s + 8, e - 1);
    var version = vs.split(", ");
    var i;
    for (i = 0; i < version.length; i++) {
      if (i != 0)
	yp += ".";
      yp += version[i];
    }
  }
}

//
// Check for RealPlayer
//
function RealMediaTest() {
  var v = cc.getComponentVersion("{CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA}", "componentid");
  if (v != "") {
    var f = parseFloat(v);
    if (f >= 6.0) {
      rp = v;
      return;
    }
  }

if (typeof(RealPlayer) == "undefined" || !rpexists()) {
    rp = false;
    return;
  }

if (typeof(RealPlayer.GetVersionInfo) == "undefined")
    rp = "6.0";
  else
    rp = RealPlayer.GetVersionInfo();
}

//
// Check for Windows Media Player
//
function ignoreerror()
{
  return true;
}

window.onerror = ignoreerror;

var hasDRM = false;
  var hasMP = false;

if (typeof(DrmStore) != "undefined")
    hasDRM = drmexists();

if (typeof(WMPlay) != "undefined")
    hasMP = (WMPlay.FileName == "");

if (!hasMP) {
    wmp = false;
    return;
  }

if (yp == false) {
    if (hasDRM == true)
      wmp = "6.4";
    else
      wmp = "6.0"
    return;
  }

wmp = "";
  var v = YPlayer.MediaPlayerVersion;
  var s = v.indexOf("Product=");
  var e = v.indexOf("File=");
  var vs = v.substring(s + 8, e - 1);
  var version = vs.split(", ");
  var i;
  for (i = 0; i < version.length; i++) {
    if (i != 0)
      wmp += ".";
    wmp += version[i];
  }
}

//
// Check for the QuickTime
//
function QuickTimeTest() {
  v = cc.getComponentVersion("{DE4AF3B0-F4D4-11D3-B41A-0050DA2E6C21}",
      "componentid");
  if (v != "") {
    qt = "";
    var version = v.split(",");
    var i;
    for (i = 0; i < version.length; i++) {
      if (i != 0)
	qt += ".";
      qt += version[i];
    }
    return;
  }

qt = qtexists();
}

//
// Check for Flash
//
function FlashTest() {
  v = cc.getComponentVersion("{D27CDB6E-AE6D-11CF-96B8-444553540000}", "componentid");
  if (v != "") {
    flash = "";
    var version = v.split(",");
    var i;
    for (i = 0; i < version.length; i++) {
      if (i != 0)
	flash += ".";
      flash += version[i];
    }
    return;
  }

flash = flashexists();
}

function detect() {
  YPlayerTest();
  WindowsMediaTest();
  RealMediaTest();
  QuickTimeTest();
  FlashTest();

// Get Connection Type
  ct = cc.connectionType;
  
  var check =	"系统		: " + os+osv		+"\n"+
  		"浏览器		: " + browser+bversion	+"\n"+
  		"java		: " + java		+"\n"+
  		"Yahoo! Player	: " + yp		+"\n"+
  		"RealPlayer	: " + rp		+"\n"+
  		"Media Player	: " + wmp		+"\n"+
  		"QuickTime	: " + qt		+"\n"+
  		"Flash		: " + flash		+"\n"+
  		"接入方式	: " + ct

alert(check)
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

十六、跨域访问

提示：您可以先修改部分代码再运行

十七、正则处理超文本流

<textarea id=html_string style="width=100%" rows=8>
<input
type='text' value = 's>om
"  ething' name=names asdf=asdf>
</input>><input value=a>a name=aa><input name=bb value=bb>
<input name=cc value=cc>
</textarea><br><br>

for (var i=0; i<re.length; i++)
{
	document.write("<input type=radio name=re value="+i+">"+re[i][0]+" <input id=reValue size=100 type=text>　")
	document.write("<button onclick='re["+i+"][1]=document.all.reValue["+i+"].value'>保存</button>")
	document.write("<button onclick='document.all.reValue["+i+"].value=re["+i+"][1]'>恢复</button><br>")
	document.all.reValue.length ? document.all.reValue[document.all.reValue.length-1].value = re[i][1] : document.all.reValue.value = re[i][1]
}

document.all.re[0].checked = true

function matchTest()
{
	var ss = html_string.innerText
	var re
	for (var i=0; i<document.all.re.length; i++)	if(document.all.re[i].checked)	break
	re = eval(document.all.reValue[i].value)
	rx = re.exec(ss)
	testArea.innerHTML = ""
	for (var i=1; i<9; i++)		testArea.innerHTML += " RegExp$"+i+"="+eval("RegExp.$"+i)+"　"
	rv = ss.match(re)
	for (var i=0; rv && i<rv.length; i++)
	{
		testArea.innerHTML += "<xmp style='background:#EEEEEE; padding:5px'>"+rv[i]+"</xmp>"
	}
}
</script>

<br>

提示：您可以先修改部分代码再运行

十八、拼音处理

<textarea id=kevin cols=100 rows=10>小狗收藏贴</textarea><br>
<button onclick="test.innerHTML = toPinyin(kevin.innerText)">转换</button>
<button onclick="test.innerHTML = kevin.innerText.split('').sort(pinyinSort).join('')">排序</button>
<div id=test style="font-size:16px;"></div>

提示：您可以先修改部分代码再运行

十九、 Choose Font Sample

<HTML>
<HEAD>
<TITLE>Choose Font Sample</TITLE>
<SCRIPT>

function fnInit(){
      for (i=0; i<document.all.length; i++)
            document.all(i).unselectable = "on";
    oDiv.unselectable = "off";
	getSystemFonts();
}

function getSystemFonts()
{  
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oOption = document.createElement("OPTION");
oOption.text = "Choose a Font";
oOption.value = "0";
oSelect.add(oOption);
for (i = 1;i < dlgHelper.fonts.count;i++)
	{ 
		fArray[i] = dlgHelper.fonts(i);
		var oOption = document.createElement("OPTION");
		
		oOption.text = fArray[i];
		oOption.Value = i;
		oSelect.add(oOption);	
	} 
}

function ChangeFont(){
var sSelection = oSelect.options[oSelect.selectedIndex].text;
document.execCommand("FontName",false,sSelection);
} 
</SCRIPT>

</HEAD>

<BODY onload="fnInit();">
<H1>Choose Font Sample</H1>

<DIV CLASS="desbar">
       <DIV STYLE="background-color:#eeeeee; border:2px solid #cccccc; padding:10px">  
              <SELECT  id="oSelect" onchange="ChangeFont()">
			  </SELECT> 
			  <br>
			  <br>
			  
            <DIV id=oDiv CONTENTEDITABLE ALIGN=left STYLE="height:100; 
                background-color:white; font-family:Arial; font-size:15pt; padding:10;    
                border:2px inset #eeeeee; overflow:auto;">
				Select this text and choose a font from the drop down above.
			</DIV>   
        </DIV>
		<br>
		<br>
		

 <OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
</body>
</html>

提示：您可以先修改部分代码再运行

二十、色彩模式函数

function HextoRGB(hex)
{
	hex = hex.toUpperCase();
	if(hex.charAt(0) == "#") hex = hex.substring(1,hex.length);
	var rgb = new Array(3);
	rgb.r = hex.substring(0,2);
	rgb.g = hex.substring(2,4);
	rgb.b = hex.substring(4,6);
	rgb.r = parseInt(rgb.r,16);
	rgb.g = parseInt(rgb.g,16);
	rgb.b = parseInt(rgb.b,16);
	if(isNaN(rgb.r)) rgb.r = 0;
	if(isNaN(rgb.g)) rgb.g = 0;
	if(isNaN(rgb.b)) rgb.b = 0;
	return rgb;
}

function RGBtoHex(R, G, B)
{
	var n = Math.round(B); 
	n += Math.round(G) << 8;
	n += Math.round(R) << 16;
	return DectoHex(n);
}

// turns decimal integer (e.g., bgColor) into hexadecimal string
function DectoHex(num)
{
	var i = 0; var j = 20;
	var str = "#";
	while(j >= 0)
	{
		i = (num >> j)%16;
		if(i >= 10)
		{
			if(i == 10) str += "A";
			else if(i == 11) str += "B";
			else if(i == 12) str += "C";
			else if(i == 13) str += "D";
			else if(i == 14) str += "E";
			else str += "F";
		}
		else
			str += i;
		j -= 4;
	}
	return str;
}

function MIN()
{
	var min = 255;
	for(var i = 0; i < arguments.length; i++)
		if(arguments[i] < min)
	min = arguments[i];
	return min;
}

function MAX()
{
	var max = 0;
	for(var i = 0; i < arguments.length; i++)
	if(arguments[i] > max)
	max = arguments[i];
	return max;
}

function RGBtoCMYK(r,g,b)
{
	// doesn't distort! not really usable...
	r /= 255;
	g /= 255;
	b /= 255;
	var cmyk = new Array(4);
	cmyk.c = Math.pow(1-r,.45);
	cmyk.m = Math.pow(1-g,.45);
	cmyk.y = Math.pow(1-b,.45);
	cmyk.k = MIN(cmyk.c,cmyk.y,cmyk.m);
	cmyk.c -= cmyk.k;
	cmyk.m -= cmyk.k;
	cmyk.y -= cmyk.k;
	return cmyk;
}

function RGB(q1,q2,hue)
{
	if (hue>360) hue=hue-360;
	if (hue<0) hue=hue+360;
	if (hue<60) return (q1+(q2-q1)*hue/60);
	else if (hue<180) return(q2);
	else if (hue<240) return(q1+(q2-q1)*(240-hue)/60);
	else return(q1);
}

提示：您可以先修改部分代码再运行

作者: 色眯眯的小疯狗 时间: 2002-4-24 17:47

二十一、正则匹配处理 (研究中)

提示：您可以先修改部分代码再运行

二十二、checkbox树型选择

提示：您可以先修改部分代码再运行

二十三、日期选择菜单

function changeDate()
	{
		var year	= eval("document.forms[0].year")
		var month	= eval("document.forms[0].month")
		var date	= eval("document.forms[0].date")

writeDate(date, year.options(year.selectedIndex).value, month.options(month.selectedIndex).value)
	}
</script>

<form>
              <select name="year" onchange="changeDate()">
              </select>
              年 
              <select name="month" onchange="changeDate()">
              </select>
              月 
              <select name="date">
              </select>
              日 </nobr></td>
            <script language="javascript" type="text/javascript">
			writeYears(document.forms[0].year, now)
		    	document.forms[0].year.selectedIndex = 0
		    	
		    	writeMonths(document.forms[0].month)
		    	document.forms[0].month.selectedIndex = now.getMonth()
		    	
		    	writeDate(document.forms[0].date, now.getYear(), now.getMonth()+1)
		    	document.forms[0].date.selectedIndex = now.getDate()-1
	</script>
</form>

提示：您可以先修改部分代码再运行

二十四、大小写金额转换

function aNumber(num)
	{
		var numArray = new Array()
		var unit = "亿万圆$"
		for (var i=0; i<unit.length; i++)
		{
			var re = eval("/"+ (numArray[i-1] ? unit.charAt(i-1) : "") +"(.*)"+unit.charAt(i)+"/")
			if (num.match(re))
			{
				numArray[i] = num.match(re)[1].replace(/^拾/, "壹拾")
				numArray[i] = numArray[i].replace(/[零壹贰叁肆伍陆柒捌玖]/g, function ($1)
				{
					return "零壹贰叁肆伍陆柒捌玖".indexOf($1)
				})
				numArray[i] = numArray[i].replace(/[分角拾佰仟]/g, function ($1)
				{
					return "*"+Math.pow(10, "分角 拾佰仟 ".indexOf($1)-2)+"+"
				}).replace(/^\*|\+$/g, "").replace(/整/, "0")
				numArray[i] = "(" + numArray[i] + ")*"+Math.ceil(Math.pow(10, (2-i)*4))
			}
				else	numArray[i] = 0
		}
		return eval(numArray.join("+"))
	}
</script>

提示：您可以先修改部分代码再运行

二十五、循环滚动效果

<HTML>
<HEAD>
<TITLE>滚动效果</TITLE>
</HEAD>
<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0>
<table>
<tr><td style="padding: 5">
<div id="testDiv" style="border: buttonface 2 solid">
<img src="/bbs/images/bbtitle.gif">
</div>
<script language="JScript">
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
{
	var scrollDiv		= obj
	var scrollContent	= document.createElement("span")
	scrollContent.style.position = "absolute"
	scrollDiv.applyElement(scrollContent, "inside")
	var displayWidth	= (oWidth  != "auto" && oWidth ) ? oWidth  : scrollContent.offsetWidth  + parseInt(scrollDiv.currentStyle.borderRightWidth)
	var displayHeight	= (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth)
	var contentWidth	= scrollContent.offsetWidth
	var contentHeight	= scrollContent.offsetHeight
	var scrollXItems	= Math.ceil(displayWidth  / contentWidth)  + 1
	var scrollYItems	= Math.ceil(displayHeight / contentHeight) + 1

scrollDiv.style.width	 = displayWidth
	scrollDiv.style.height	 = displayHeight
	scrollDiv.style.overflow = "hidden"
	scrollDiv.setAttribute("state", "stop")
	scrollDiv.setAttribute("drag", drag ? drag : "horizontal")
	scrollDiv.setAttribute("direction", direction ? direction : "left")
	scrollDiv.setAttribute("zoom", zoom ? zoom : 1)
	scrollContent.style.zoom = scrollDiv.zoom
	
	var scroll_script =	"var scrollDiv = " + scrollDiv.uniqueID										+"\n"+
				"var scrollObj = " + scrollContent.uniqueID									+"\n"+
				"var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"	+"\n"+
				"var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"	+"\n"+
				"var scrollx = scrollObj.runtimeStyle.pixelLeft"								+"\n"+
				"var scrolly = scrollObj.runtimeStyle.pixelTop"									+"\n"+

"switch (scrollDiv.state.toLowerCase())"								+"\n"+
				"{"