GUI Components JavaScript DHTML

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/


#contextMenu {position:absolute; background-color:#cfcfcf; 
              border-style:solid; border-width:1px; 
              border-color:#EFEFEF #505050 #505050 #EFEFEF; 
              padding:3px 10px; font-size:8pt; font-family:Arial, Helvetica; 
              line-height:150%; visibility:hidden}
.menuItem {color:black}
.menuItemOn {color:white}
OL {list-style-position:inside; font-weight:bold; cursor:nw-resize}
LI {font-weight:normal}


function showContextMenu() {
    contextMenu.setCapture()
    contextMenu.style.pixelTop = event.clientY + document.body.scrollTop
    contextMenu.style.pixelLeft = event.clientX + document.body.scrollLeft
    contextMenu.style.visibility = "visible"
    event.returnValue = false
}
function revert() {
    document.releaseCapture()
    hideMenu()
}
function hideMenu() {
    contextMenu.style.visibility = "hidden"
}
function handleClick() {
    var elem = window.event.srcElement
    if (elem.id.indexOf("menuItem") == 0) {
        shapesList.style.listStyleType = elem.LISTTYPE
    }
    revert()
    event.cancelBubble = true
}
function highlight() {
    var elem = event.srcElement
    if (elem.className == "menuItem") {
        elem.className = "menuItemOn"
    }
}
function unhighlight() {
    var elem = event.srcElement
    if (elem.className == "menuItemOn") {
        elem.className = "menuItem"
    }
}



Three-Dimensional Shapes
  • Circular Cylinder

  • Cube

  • Rectangular Prism

  • Regular Right Pyramid

  • Right Circular Cone

  • Sphere


  •  onMouseOver="highlight()" onMouseOut="unhighlight()">
    A,B,C,...

    a,b,c,...

    I,II,III,...

    i,ii,iii,...

    1,2,3,...