New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<html>
<head>
<script src="coolbuttons.js">

/*
Depressible DHTML buttons (By Erik Arvidsson at http://webfx.eae.net)
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

</script>
</head>

<body>

<table class="coolBar">
<tr>
<td class="coolButton">
<font face="Verdana" size="2"><b>Dynamic Drive</b></font>
</td>
<td class="coolButton">
<font face="Verdana" size="2"><b>What's New</b></font>
</td>
</tr>
</table>

</body>
</html>

<!--Source for coolbuttons.js-->

///////////////////////////////////////////////////////////////////////
// This Button Script was designed by Erik Arvidsson for WebFX //
// //
// For more info and examples see: http://webfx.eae.net/ //
// or send mail to erik@eae.net //
// //
// Feel free to use this code as lomg as this disclaimer is //
// intact. //
///////////////////////////////////////////////////////////////////////

document.onmouseover = doOver;
document.onmouseout = doOut;
document.onmousedown = doDown;
document.onmouseup = doUp;


function doOver() {
    var toEl = getReal(window.event.toElement, "className", "coolButton");
    var fromEl = getReal(window.event.fromElement, "className", "coolButton");
    if (toEl == fromEl) return;
    var el = toEl;
   
//    alert(el);
   
//    var cDisabled = el.getAttribute("cDisabled");
    var cDisabled = el.cDisabled;
//    alert(cDisabled);
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
   
    if (el.className == "coolButton")
        el.onselectstart = new Function("return false");
   
    if ((el.className == "coolButton") && !cDisabled) {
        makeRaised(el);
        makeGray(el,false);
    }
}

function doOut() {
    var toEl = getReal(window.event.toElement, "className", "coolButton");
    var fromEl = getReal(window.event.fromElement, "className", "coolButton");
    if (toEl == fromEl) return;
    var el = fromEl;

//    var cDisabled = el.getAttribute("cDisabled");
    var cDisabled = el.cDisabled;
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present

    var cToggle = el.cToggle;
    toggle_disabled = (cToggle != null); // If CTOGGLE atribute is present

    if (cToggle && el.value) {
        makePressed(el);
        makeGray(el,true);
    }
    else if ((el.className == "coolButton") && !cDisabled) {
        makeFlat(el);
        makeGray(el,true);
    }

}

function doDown() {
    el = getReal(window.event.srcElement, "className", "coolButton");
   
    var cDisabled = el.cDisabled;
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
   
    if ((el.className == "coolButton") && !cDisabled) {
        makePressed(el)
    }
}

function doUp() {
    el = getReal(window.event.srcElement, "className", "coolButton");
   
    var cDisabled = el.cDisabled;
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
   
    if ((el.className == "coolButton") && !cDisabled) {
        makeRaised(el);
    }
}


function getReal(el, type, value) {
    temp = el;
    while ((temp != null) && (temp.tagName != "BODY")) {
        if (eval("temp." + type) == value) {
            el = temp;
            return el;
        }
        temp = temp.parentElement;
    }
    return el;
}

function findChildren(el, type, value) {
    var children = el.children;
    var tmp = new Array();
    var j=0;
   
    for (var i=0; i<children.length; i++) {
        if (eval("children[i]." + type + "==\"" + value + "\"")) {
            tmp[tmp.length] = children[i];
        }
        tmp = tmp.concat(findChildren(children[i], type, value));
    }
   
    return tmp;
}

function disable(el) {

    if (document.readyState != "complete") {
        window.setTimeout("disable(" + el.id + ")", 100);    // If document not finished rendered try later.
        return;
    }
   
    var cDisabled = el.cDisabled;
   
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present

    if (!cDisabled) {
        el.cDisabled = true;
       
        el.innerHTML = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +
                        '<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +
                        el.innerHTML +
                        '</span>' +
                        '</span>';

        if (el.onclick != null) {
            el.cDisabled_onclick = el.onclick;
            el.onclick = null;
        }
    }
}

function enable(el) {
    var cDisabled = el.cDisabled;
   
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
   
    if (cDisabled) {
        el.cDisabled = null;
        el.innerHTML = el.children[0].children[0].innerHTML;

        if (el.cDisabled_onclick != null) {
            el.onclick = el.cDisabled_onclick;
            el.cDisabled_onclick = null;
        }
    }
}

function addToggle(el) {
    var cDisabled = el.cDisabled;
   
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
   
    var cToggle = el.cToggle;
   
    cToggle = (cToggle != null); // If CTOGGLE atribute is present

    if (!cToggle && !cDisabled) {
        el.cToggle = true;
       
        if (el.value == null)
            el.value = 0;         // Start as not pressed down
       
        if (el.onclick != null)
            el.cToggle_onclick = el.onclick;    // Backup the onclick
        else
            el.cToggle_onclick = "";

        el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");
    }
}

function removeToggle(el) {
    var cDisabled = el.cDisabled;
   
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
   
    var cToggle = el.cToggle;
   
    cToggle = (cToggle != null); // If CTOGGLE atribute is present
   
    if (cToggle && !cDisabled) {
        el.cToggle = null;

        if (el.value) {
            toggle(el);
        }

        makeFlat(el);
       
        if (el.cToggle_onclick != null) {
            el.onclick = el.cToggle_onclick;
            el.cToggle_onclick = null;
        }
    }
}

function toggle(el) {
    el.value = !el.value;
   
    if (el.value)
        el.style.background = "URL(/images/tileback.gif)";
    else
        el.style.backgroundImage = "";

//    doOut(el);   
}


function makeFlat(el) {
    with (el.style) {
        background = "";
        border = "1px solid buttonface";
        padding = "1px";
    }
}

function makeRaised(el) {
    with (el.style) {
        borderLeft = "1px solid buttonhighlight";
        borderRight = "1px solid buttonshadow";
        borderTop = "1px solid buttonhighlight";
        borderBottom = "1px solid buttonshadow";
        padding = "1px";
    }
}

function makePressed(el) {
    with (el.style) {
        borderLeft = "1px solid buttonshadow";
        borderRight = "1px solid buttonhighlight";
        borderTop = "1px solid buttonshadow";
        borderBottom = "1px solid buttonhighlight";
        paddingTop = "2px";
        paddingLeft = "2px";
        paddingBottom = "0px";
        paddingRight = "0px";
    }
}

function makeGray(el,b) {
    var filtval;
   
    if (b)
        filtval = "gray()";
    else
        filtval = "";

    var imgs = findChildren(el, "tagName", "IMG");
       
    for (var i=0; i<imgs.length; i++) {
        imgs[i].style.filter = filtval;
    }

}
   

document.write("<style>");
document.write(".coolBar    {background: buttonface;border-top: 1px solid buttonhighlight;    border-left: 1px solid buttonhighlight;     border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}");
document.write(".coolButton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
document.write(".coolButton IMG    {filter: gray();}");
document.write("</style>");