/ Published in: Other
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--************************************************************************--> <!--* Windows Demo *--> <!--* *--> <!--* Copyright 2001 by Mike Hall *--> <!--* Please see http://www.brainjar.com for terms of use. *--> <!--************************************************************************--> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="/common/default.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .lastLine { padding-left: 6em; } </style> <style type="text/css"> .window { background-color: #c0c0c0; border-color: #f0f0f0 #606060 #404040 #d0d0d0; border-style: solid; border-width: 2px; margin: 0px; padding: 2px; position: absolute; text-align: left; visibility: hidden; } .titleBar { background-color: #008080; cursor: default; color: #ffffff; font-family: "MS Sans Serif", "Arial", "Helvetica", sans-serif; font-size: 8pt; font-weight: bold; margin: 0px; padding: 2px 2px 2px .5em; text-align: right; white-space: nowrap; } .titleBarText { float: left; overflow: hidden; text-align: left; } .titleBarButtons { border-style: none; border-width: 0px; vertical-align: middle; width: 50px; height: 14px; } .clientArea { background-color: #ffffff; border-color: #404040 #e0e0e0 #f0f0f0 #505050; border-style: solid; border-width: 2px; color: #000000; font-family: "Arial", "Helvetica", sans-serif; font-size: 10pt; margin: 2px 0px 0px 0px; overflow: auto; padding: .5em; } </style> <script type="text/javascript">//<![CDATA[ //***************************************************************************** // Do not remove this notice. // // Copyright 2001 by Mike Hall. // See http://www.brainjar.com for terms of use. //***************************************************************************** // Determine browser and version. function Browser() { var ua, s, i; this.isIE = false; // Internet Explorer this.isNS = false; // Netscape this.version = null; ua = navigator.userAgent; s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } // Treat any other "Gecko" browser as NS 6.1. s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } } var browser = new Browser(); //============================================================================= // Window Object //============================================================================= function Window(el) { var i, mapList, mapName; // Get window components. this.frame = el; this.titleBar = winFindByClassName(el, "titleBar"); this.titleBarText = winFindByClassName(el, "titleBarText"); this.titleBarButtons = winFindByClassName(el, "titleBarButtons"); this.clientArea = winFindByClassName(el, "clientArea"); // Find matching button image map. mapName = this.titleBarButtons.useMap.substr(1); mapList = document.getElementsByTagName("MAP"); for (i = 0; i < mapList.length; i++) if (mapList[i].name == mapName) this.titleBarMap = mapList[i]; // Save colors. this.activeFrameBackgroundColor = this.frame.style.backgroundColor; this.activeFrameBorderColor = this.frame.style.borderColor; this.activeTitleBarColor = this.titleBar.style.backgroundColor; this.activeTitleTextColor = this.titleBar.style.color; this.activeClientAreaBorderColor = this.clientArea.style.borderColor; if (browser.isIE) this.activeClientAreaScrollbarColor = this.clientArea.style.scrollbarBaseColor; // Save images. this.activeButtonsImage = this.titleBarButtons.src; this.inactiveButtonsImage = this.titleBarButtons.longDesc; // Set flags. this.isOpen = false; this.isMinimized = false; // Set methods. this.open = winOpen; this.close = winClose; this.minimize = winMinimize; this.restore = winRestore; this.makeActive = winMakeActive; // Set up event handling. this.frame.parentWindow = this; this.frame.onmousemove = winResizeCursorSet; this.frame.onmouseout = winResizeCursorRestore; this.frame.onmousedown = winResizeDragStart; this.titleBar.parentWindow = this; this.titleBar.onmousedown = winMoveDragStart; this.clientArea.parentWindow = this; this.clientArea.onclick = winClientAreaClick; for (i = 0; i < this.titleBarMap.childNodes.length; i++) if (this.titleBarMap.childNodes[i].tagName == "AREA") this.titleBarMap.childNodes[i].parentWindow = this; // Calculate the minimum width and height values for resizing // and fix any initial display problems. var initLt, initWd, w, dw; // Save the inital frame width and position, then reposition // the window. initLt = this.frame.style.left; initWd = parseInt(this.frame.style.width); this.frame.style.left = -this.titleBarText.offsetWidth + "px"; // For IE, start calculating the value to use when setting // the client area width based on the frame width. if (browser.isIE) { this.titleBarText.style.display = "none"; w = this.clientArea.offsetWidth; this.widthDiff = this.frame.offsetWidth - w; this.clientArea.style.width = w + "px"; dw = this.clientArea.offsetWidth - w; w -= dw; this.widthDiff += dw; this.titleBarText.style.display = ""; } // Find the difference between the frame's style and offset // widths. For IE, adjust the client area/frame width // difference accordingly. w = this.frame.offsetWidth; this.frame.style.width = w + "px"; dw = this.frame.offsetWidth - w; w -= dw; this.frame.style.width = w + "px"; if (browser.isIE) this.widthDiff -= dw; // Find the minimum width for resize. this.isOpen = true; // Flag as open so minimize call will work. this.minimize(); // Get the minimum width. if (browser.isNS && browser.version >= 1.2) // For later versions of Gecko. this.minimumWidth = this.frame.offsetWidth; else // For all others. this.minimumWidth = this.frame.offsetWidth - dw; // Find the frame width at which or below the title bar text will // need to be clipped. this.titleBarText.style.width = ""; this.clipTextMinimumWidth = this.frame.offsetWidth - dw; // Set the minimum height. this.minimumHeight = 1; // Restore window. For IE, set client area width. this.restore(); this.isOpen = false; // Reset flag. initWd = Math.max(initWd, this.minimumWidth); this.frame.style.width = initWd + "px"; if (browser.isIE) this.clientArea.style.width = (initWd - this.widthDiff) + "px"; // Clip the title bar text if needed. if (this.clipTextMinimumWidth >= this.minimumWidth) this.titleBarText.style.width = (winCtrl.minimizedTextWidth + initWd - this.minimumWidth) + "px"; // Restore the window to its original position. this.frame.style.left = initLt; } //============================================================================= // Window Methods //============================================================================= function winOpen() { if (this.isOpen) return; // Restore the window and make it visible. this.makeActive(); this.isOpen = true; if (this.isMinimized) this.restore(); this.frame.style.visibility = "visible"; } function winClose() { // Hide the window. this.frame.style.visibility = "hidden"; this.isOpen = false; } function winMinimize() { if (!this.isOpen || this.isMinimized) return; this.makeActive(); // Save current frame and title bar text widths. this.restoreFrameWidth = this.frame.style.width; this.restoreTextWidth = this.titleBarText.style.width; // Disable client area display. this.clientArea.style.display = "none"; // Minimize frame and title bar text widths. if (this.minimumWidth) this.frame.style.width = this.minimumWidth + "px"; else this.frame.style.width = ""; this.titleBarText.style.width = winCtrl.minimizedTextWidth + "px"; this.isMinimized = true; } function winRestore() { if (!this.isOpen || !this.isMinimized) return; this.makeActive(); // Enable client area display. this.clientArea.style.display = ""; // Restore frame and title bar text widths. this.frame.style.width = this.restoreFrameWidth; this.titleBarText.style.width = this.restoreTextWidth; this.isMinimized = false; } function winMakeActive() { if (winCtrl.active == this) return; // Inactivate the currently active window. if (winCtrl.active) { winCtrl.active.frame.style.backgroundColor = winCtrl.inactiveFrameBackgroundColor; winCtrl.active.frame.style.borderColor = winCtrl.inactiveFrameBorderColor; winCtrl.active.titleBar.style.backgroundColor = winCtrl.inactiveTitleBarColor; winCtrl.active.titleBar.style.color = winCtrl.inactiveTitleTextColor; winCtrl.active.clientArea.style.borderColor = winCtrl.inactiveClientAreaBorderColor; if (browser.isIE) winCtrl.active.clientArea.style.scrollbarBaseColor = winCtrl.inactiveClientAreaScrollbarColor; if (browser.isNS && browser.version < 6.1) winCtrl.active.clientArea.style.overflow = "hidden"; if (winCtrl.active.inactiveButtonsImage) winCtrl.active.titleBarButtons.src = winCtrl.active.inactiveButtonsImage; } // Activate this window. this.frame.style.backgroundColor = this.activeFrameBackgroundColor; this.frame.style.borderColor = this.activeFrameBorderColor; this.titleBar.style.backgroundColor = this.activeTitleBarColor; this.titleBar.style.color = this.activeTitleTextColor; this.clientArea.style.borderColor = this.activeClientAreaBorderColor; if (browser.isIE) this.clientArea.style.scrollbarBaseColor = this.activeClientAreaScrollbarColor; if (browser.isNS && browser.version < 6.1) this.clientArea.style.overflow = "auto"; if (this.inactiveButtonsImage) this.titleBarButtons.src = this.activeButtonsImage; this.frame.style.zIndex = ++winCtrl.maxzIndex; winCtrl.active = this; } //============================================================================= // Event handlers. //============================================================================= function winClientAreaClick(event) { // Make this window the active one. this.parentWindow.makeActive(); } //----------------------------------------------------------------------------- // Window dragging. //----------------------------------------------------------------------------- function winMoveDragStart(event) { var target; var x, y; if (browser.isIE) target = window.event.srcElement.tagName; if (browser.isNS) target = event.target.tagName; if (target == "AREA") return; this.parentWindow.makeActive(); // Get cursor offset from window frame. if (browser.isIE) { x = window.event.x; y = window.event.y; } if (browser.isNS) { x = event.pageX; y = event.pageY; } winCtrl.xOffset = winCtrl.active.frame.offsetLeft - x; winCtrl.yOffset = winCtrl.active.frame.offsetTop - y; // Set document to capture mousemove and mouseup events. if (browser.isIE) { document.onmousemove = winMoveDragGo; document.onmouseup = winMoveDragStop; } if (browser.isNS) { document.addEventListener("mousemove", winMoveDragGo, true); document.addEventListener("mouseup", winMoveDragStop, true); event.preventDefault(); } winCtrl.inMoveDrag = true; } function winMoveDragGo(event) { var x, y; if (!winCtrl.inMoveDrag) return; // Get cursor position. if (browser.isIE) { x = window.event.x; y = window.event.y; window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) { x = event.pageX; y = event.pageY; event.preventDefault(); } // Move window frame based on offset from cursor. winCtrl.active.frame.style.left = (x + winCtrl.xOffset) + "px"; winCtrl.active.frame.style.top = (y + winCtrl.yOffset) + "px"; } function winMoveDragStop(event) { winCtrl.inMoveDrag = false; // Remove mousemove and mouseup event captures on document. if (browser.isIE) { document.onmousemove = null; document.onmouseup = null; } if (browser.isNS) { document.removeEventListener("mousemove", winMoveDragGo, true); document.removeEventListener("mouseup", winMoveDragStop, true); } } //----------------------------------------------------------------------------- // Window resizing. //----------------------------------------------------------------------------- function winResizeCursorSet(event) { var target; var xOff, yOff; if (this.parentWindow.isMinimized || winCtrl.inResizeDrag) return; // If not on window frame, restore cursor and exit. if (browser.isIE) target = window.event.srcElement; if (browser.isNS) target = event.target; if (target != this.parentWindow.frame) return; // Find resize direction. if (browser.isIE) { xOff = window.event.offsetX; yOff = window.event.offsetY; } if (browser.isNS) { xOff = event.layerX; yOff = event.layerY; } winCtrl.resizeDirection = "" if (yOff <= winCtrl.resizeCornerSize) winCtrl.resizeDirection += "n"; else if (yOff >= this.parentWindow.frame.offsetHeight - winCtrl.resizeCornerSize) winCtrl.resizeDirection += "s"; if (xOff <= winCtrl.resizeCornerSize) winCtrl.resizeDirection += "w"; else if (xOff >= this.parentWindow.frame.offsetWidth - winCtrl.resizeCornerSize) winCtrl.resizeDirection += "e"; // If not on window edge, restore cursor and exit. if (winCtrl.resizeDirection == "") { this.onmouseout(event); return; } // Change cursor. if (browser.isIE) document.body.style.cursor = winCtrl.resizeDirection + "-resize"; if (browser.isNS) this.parentWindow.frame.style.cursor = winCtrl.resizeDirection + "-resize"; } function winResizeCursorRestore(event) { if (winCtrl.inResizeDrag) return; // Restore cursor. if (browser.isIE) document.body.style.cursor = ""; if (browser.isNS) this.parentWindow.frame.style.cursor = ""; } function winResizeDragStart(event) { var target; // Make sure the event is on the window frame. if (browser.isIE) target = window.event.srcElement; if (browser.isNS) target = event.target; if (target != this.parentWindow.frame) return; this.parentWindow.makeActive(); if (this.parentWindow.isMinimized) return; // Save cursor position. if (browser.isIE) { winCtrl.xPosition = window.event.x; winCtrl.yPosition = window.event.y; } if (browser.isNS) { winCtrl.xPosition = event.pageX; winCtrl.yPosition = event.pageY; } // Save window frame position and current window size. winCtrl.oldLeft = parseInt(this.parentWindow.frame.style.left, 10); winCtrl.oldTop = parseInt(this.parentWindow.frame.style.top, 10); winCtrl.oldWidth = parseInt(this.parentWindow.frame.style.width, 10); winCtrl.oldHeight = parseInt(this.parentWindow.clientArea.style.height, 10); // Set document to capture mousemove and mouseup events. if (browser.isIE) { document.onmousemove = winResizeDragGo; document.onmouseup = winResizeDragStop; } if (browser.isNS) { document.addEventListener("mousemove", winResizeDragGo, true); document.addEventListener("mouseup" , winResizeDragStop, true); event.preventDefault(); } winCtrl.inResizeDrag = true; } function winResizeDragGo(event) { var north, south, east, west; var dx, dy; var w, h; if (!winCtrl.inResizeDrag) return; // Set direction flags based on original resize direction. north = false; south = false; east = false; west = false; if (winCtrl.resizeDirection.charAt(0) == "n") north = true; if (winCtrl.resizeDirection.charAt(0) == "s") south = true; if (winCtrl.resizeDirection.charAt(0) == "e" || winCtrl.resizeDirection.charAt(1) == "e") east = true; if (winCtrl.resizeDirection.charAt(0) == "w" || winCtrl.resizeDirection.charAt(1) == "w") west = true; // Find change in cursor position. if (browser.isIE) { dx = window.event.x - winCtrl.xPosition; dy = window.event.y - winCtrl.yPosition; } if (browser.isNS) { dx = event.pageX - winCtrl.xPosition; dy = event.pageY - winCtrl.yPosition; } // If resizing north or west, reverse corresponding amount. if (west) dx = -dx; if (north) dy = -dy; // Check new size. w = winCtrl.oldWidth + dx; h = winCtrl.oldHeight + dy; if (w <= winCtrl.active.minimumWidth) { w = winCtrl.active.minimumWidth; dx = w - winCtrl.oldWidth; } if (h <= winCtrl.active.minimumHeight) { h = winCtrl.active.minimumHeight; dy = h - winCtrl.oldHeight; } // Resize the window. For IE, keep client area and frame widths in synch. if (east || west) { winCtrl.active.frame.style.width = w + "px"; if (browser.isIE) winCtrl.active.clientArea.style.width = (w - winCtrl.active.widthDiff) + "px"; } if (north || south) winCtrl.active.clientArea.style.height = h + "px"; // Clip the title bar text, if necessary. if (east || west) { if (w < winCtrl.active.clipTextMinimumWidth) winCtrl.active.titleBarText.style.width = (winCtrl.minimizedTextWidth + w - winCtrl.active.minimumWidth) + "px"; else winCtrl.active.titleBarText.style.width = ""; } // For a north or west resize, move the window. if (west) winCtrl.active.frame.style.left = (winCtrl.oldLeft - dx) + "px"; if (north) winCtrl.active.frame.style.top = (winCtrl.oldTop - dy) + "px"; if (browser.isIE) { window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) event.preventDefault(); } function winResizeDragStop(event) { winCtrl.inResizeDrag = false; // Remove mousemove and mouseup event captures on document. if (browser.isIE) { document.onmousemove = null; document.onmouseup = null; } if (browser.isNS) { document.removeEventListener("mousemove", winResizeDragGo, true); document.removeEventListener("mouseup" , winResizeDragStop, true); } } //============================================================================= // Utility functions. //============================================================================= function winFindByClassName(el, className) { var i, tmp; if (el.className == className) return el; // Search for a descendant element assigned the given class. for (i = 0; i < el.childNodes.length; i++) { tmp = winFindByClassName(el.childNodes[i], className); if (tmp != null) return tmp; } return null; } //============================================================================= // Initialization code. //============================================================================= var winList = new Array(); var winCtrl = new Object(); function winInit() { var elList; // Initialize window control object. winCtrl.maxzIndex = 0; winCtrl.resizeCornerSize = 16; winCtrl.minimizedTextWidth = 100; winCtrl.inactiveFrameBackgroundColor = "#c0c0c0"; winCtrl.inactiveFrameBorderColor = "#f0f0f0 #505050 #404040 #e0e0e0"; winCtrl.inactiveTitleBarColor = "#808080"; winCtrl.inactiveTitleTextColor = "#c0c0c0"; winCtrl.inactiveClientAreaBorderColor = "#404040 #e0e0e0 #f0f0f0 #505050"; winCtrl.inactiveClientAreaScrollbarColor = ""; winCtrl.inMoveDrag = false; winCtrl.inResizeDrag = false; // Initialize windows and build list. elList = document.getElementsByTagName("DIV"); for (var i = 0; i < elList.length; i++) if (elList[i].className == "window") winList[elList[i].id] = new Window(elList[i]); } window.onload = winInit; // run initialization code after page loads. //]]></script> </head> <body> <!-- Normal page content. --> <div id="demoBox"> <p>This page contains three sample windows which can be opened using the links below.</p> <p> | | </p> <p>The first two use the default window style while the third demonstrates how an individual window can be customized. Use your browser's </div> <!-- Sample Window 1 --> <div id="sample1" class="window" style="left:50px;top:150px;width:480px;"> <div class="titleBar"> <img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap1" width="50" height="14" /> <map id="sampleMap1" name="sampleMap1"> <area shape="rect" coords="0,0,15,13" href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" /> <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore" onclick="this.parentWindow.restore();return false;" /> <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close" onclick="this.parentWindow.close();return false;" /> </map> </div> <div class="clientArea" style="height:200px;"> Over many a quaint and curious volume of forgotten lore-<br /> While I nodded, nearly napping, suddenly there came a tapping<br /> As of some one gently rapping, rapping at my chamber door<br /> "'T is some visitor," I muttered, "tapping at my chamber door-<br /> And each separate dying ember wrought its ghost upon the floor.<br /> Eagerly I wished the morrow;-vainly I had sought to borrow<br /> From my books surcease of sorrow-sorrow for the lost Lenore-<br /> For the rare and radiant maiden whom the angels name Lenore-<br /> Thrilled me-filled me with fantastic terrors never felt before;<br /> So that now, to still the beating of my heart, I stood repeating,<br /> "'T is some visitor entreating entrance at my chamber door-<br /> Some late visitor entreating entrance at my chamber door;-<br /> "Sir," said I, "or Madam, truly your forgiveness I implore;<br /> But the fact is I was napping, and so gently you came rapping,<br /> And so faintly you came tapping, tapping at my chamber door,<br /> That I scarce was sure I heard you"-here I opened wide the door;-<br /> Doubting, dreaming dreams no mortal ever dared to dream before;<br /> But the silence was unbroken, and the stillness gave no token,<br /> And the only word there spoken was the whispered word, "Lenore?"<br /> This I whispered, and an echo murmured back the word, "Lenore!"<br /> Soon again I heard a tapping somewhat louder than before.<br /> "Surely," said I, "surely that is something at my window lattice;<br /> Let me see, then, what thereat is, and this mystery explore-<br /> Let my heart be still a moment and this mystery explore;-<br /> In there stepped a stately Raven of the saintly days of yore;<br /> Not the least obeisance made he; not a minute stopped or stayed he;<br /> But, with mien of lord or lady, perched above my chamber door-<br /> Perched upon a bust of Pallas just above my chamber door-<br /> By the grave and stern decorum of the countenance it wore,<br /> "Though thy crest be shorn and shaven, thou," I said,"art sure no craven,<br /> Ghastly grim and ancient Raven wandering from the Nightly shore-<br /> Tell me what they lordly name is on the Night's Plutonian shore!"<br /> Though its answer little meaning-little relevancy bore;<br /> For we cannot help agreeing that no living human being<br /> Ever yet was blessed with seeing bird above his chamber door-<br /> Bird or beast upon the culptured bust above his chamber door,<br /> That one word, as if his soul in that one word he did outpour.<br /> Nothing farther then he uttered-not a feather then he fluttered-<br /> Till I scarcely more than muttered, "Other friends have flown before-<br /> On the morrow he will leave me, as my Hopes have flown before."<br /> "Doubtless," said I, "what it utters is its only stock and store<br /> Caught from some unhappy master whom unmerciful Disaster<br /> Followed fast and followed faster till his songs one burden bore-<br /> Till the dirges of his Hope that melancholy burden more<br /> Straight I wheeled a cushioned seat in front of bird and bust and door;<br /> Then, upon the velvet sinking, I betook myself to linking<br /> Fancy unto fancy, thinking what this ominous bird of yore-<br /> What this grim, ungainly, ghastly, gaunt, and ominous bird of yore<br /> To the fowl whose fiery eyes now burned into my bosom's core;<br /> This and more I sat divining, with my head at ease reclining<br /> On the cushion's velvet lining that the lamp-light gloating o'er,<br /> But whose velvet-violet lining with the lamp-light gloating o'er,<br /> Swung by seraphim whose foot-falls tinkled on the tufted floor.<br /> "Wretch," I cried, "thy God hath lent thee-by these angels he hath sent thee<br /> Respite-respite and nepenthe from thy memories of Lenore;<br /> Quaff, oh, quaff this kind nepenthe and forget this lost Lenore!"<br /> By that Heaven that bends above us-by that God we both adore-<br /> Tell this soul with sorrow laden if, within the distant<br /> Aidenn, It shall clasp a sainted maiden whom the angels name Lenore-<br /> Clasp a rare and radiant maiden whom the angels name Lenore."<br /> "Get thee back into the tempest and the Night's Plutonian shore!<br /> Leave no black plume as a token of that lie thy soul hath spoken!<br /> Leave my loneliness unbroken!-quit the bust above my door!<br /> Take thy beak from out my heart, and take thy form from off my door!"<br /> On the pallid bust of Pallas just above my chamber door;<br /> And his eyes have all the seeming of a demon's that is dreaming,<br /> And the lamp-light o'er him streaming throws his shadow on the floor;<br /> And my soul from out that shadow that lies floating on the floor<br /> </div> </div> <!-- Sample Window 2 --> <div id="sample2" class="window" style="left:200px;top:100px;width:280px;"> <div class="titleBar"> <img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap2" width="50" height="14" /> <map id="sampleMap2" name="sampleMap2"> <area shape="rect" coords="0,0,15,13" href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" /> <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore" onclick="this.parentWindow.restore();return false;" /> <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close" onclick="this.parentWindow.close();return false;" /> </map> </div> <div class="clientArea" style="height:175px;"> Within the lonesome latter years!<br /> An angel throng, bewinged, bedight<br /> In veils, and drowned in tears,<br /> Sit in a theatre, to see<br /> A play of hopes and fears,<br /> While the orchestra breathes fitfully<br /> The music of the spheres.</p> Mutter and mumble low,<br /> And hither and thither fly-<br /> Mere puppets they, who come and go<br /> At bidding of vast formless things<br /> That shift the scenery to and fro,<br /> Flapping from out their Condor wings<br /> Invisible Woe!</p> It shall not be forgot!<br /> With its Phantom chased for evermore,<br /> By a crowd that seize it not,<br /> Through a circle that ever returneth in<br /> To the self-same spot,<br /> And much of Madness, and more of Sin,<br /> And Horror the soul of the plot.</p> A crawling shape intrude!<br /> A blood-red thing that writhes from out<br /> The scenic solitude!<br /> It writhes!- it writhes!- with mortal pangs<br /> The mimes become its food,<br /> And seraphs sob at vermin fangs<br /> In human gore imbued.</p> And, over each quivering form,<br /> The curtain, a funeral pall,<br /> Comes down with the rush of a storm,<br /> While the angels, all pallid and wan,<br /> Uprising, unveiling, affirm<br /> That the play is the tragedy, "Man,"<br /> And its hero the Conqueror Worm.</p> </div> </div> <!-- Sample Window 3 --> <div id="sample3" class="window" style="left:350px;top:50px;width:300px;background-color:#f0c090;border-color:#ffe0b0 #a07040 #805020 #e0b080;"> <div class="titleBar" style="background-color:#c08060;color:#ffffcc;"> <img class="titleBarButtons" alt="" src="graphics/altbuttons.gif" longdesc="graphics/altbuttonslow.gif" usemap="#sampleMap3" width="50" height="14" /> <map id="sampleMap3" name="sampleMap3"> <area shape="rect" coords="0,0,15,13" href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" /> <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore" onclick="this.parentWindow.restore();return false;" /> <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close" onclick="this.parentWindow.close();return false;" /> </map> </div> <div class="clientArea" style="height:150px;background-color:#ffffcc;color:#806040;border-color:#805020 #e0b080 #ffe0b0 #a07040;scrollbar-base-color:#f0c090;"> 'Mid dark thoughts of the grey tomb-stone;<br /> Not one, of all the crowd, to pry<br /> Into thine hour of secrecy.</p> Which is not loneliness- for then<br /> The spirits of the dead, who stood<br /> In life before thee, are again<br /> In death around thee, and their will<br /> Shall overshadow thee; be still.</p> And the stars shall not look down<br /> From their high thrones in the Heaven<br /> With light like hope to mortals given,<br /> But their red orbs, without beam,<br /> To thy weariness shall seem<br /> As a burning and a fever<br /> Which would cling to thee for ever.</p> Now are visions ne'er to vanish;<br /> From thy spirit shall they pass<br /> No more, like dew-drop from the grass.</p> And the mist upon the hill<br /> Shadowy, shadowy, yet unbroken,<br /> Is a symbol and a token.<br /> How it hangs upon the trees,<br /> A mystery of mysteries!</p> </div> </div> </body> </html>