Q1136 How can I simulate a text toolbar across the top of the document?

irt.org | Knowledge Base | DHTML | Q1136 [ previous next ]

Q1136 How can I simulate a text toolbar across the top of the document?

Try:

<html>

<head>
<script language="JavaScript1.2"><!--
var text = null;

function init() {
    text = '<a href="javascript:void()" onMouseOver="window.status=\'\'">File<\/a><br>' +
           '<a href="page1a.htm">New<\/a><br>' +
           '<a href="page1b.htm">Open<\/a><br>' +
           '<a href="page1c.htm">Save<\/a>';

    update(1,text);

    text = '<a href="javascript:void()" onMouseOver="window.status=\'\'">Edit<\/a><br>' +
           '<a href="page2a.htm">Undo<\/a><br>' +
           '<a href="page2b.htm">Redo<\/a><br>' +
           '<a href="page2c.htm">Cut<\/a><br>' +
           '<a href="page2d.htm">Copy<\/a><br>' +
           '<a href="page2e.htm">Paste<\/a>';

    update(2,text);

    text = '<a href="javascript:void()" onMouseOver="window.status=\'\'">View<\/a><br>' +
           '<a href="page3a.htm">Navigation<\/a><br>' +
           '<a href="page3b.htm">Location<\/a><br>' +
           '<a href="page3c.htm">Personal<\/a>';

    update(3,text);

    text = '<a href="javascript:void()" onMouseOver="window.status=\'\'">Go<\/a><br>' +
           '<a href="page4a.htm">back<\/a><br>' +
           '<a href="page4b.htm">forward<\/a><br>' +
           '<a href="page4c.htm">home<\/a>';

    update(4,text);

}

function update(n,text) {
    if (document.all)
        document.all('s' + n).innerHTML = '<table bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="0"><tr><td>' + text + '<\/td><\/td><\/table>';

    else if (document.layers) {
        hide(n);
        document.layers['l' + n].document.open();
        document.layers['l' + n].document.writeln('<table bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="0"><tr><td>' + text + '<\/td><\/td><\/table>');
        document.layers['l' + n].document.close();
    }
}

function reveal(n) {
    for (var i=1;i<tabtotal+1;i++) {
        if (i != n) hide(i);
        else show(i);
    }
}

function show(n) {
    if (document.layers && document.layers['l' + n] != null)
        document.layers['l' + n].visibility = 'visible';
    else if (document.all)
        document.all['s' + n].style.visibility = 'visible';
    tab = n;
}

function hide(n) {
    if (document.layers && document.layers['l' + n] != null)
        document.layers['l' + n].visibility = 'hidden';
    else if (document.all)
        document.all['s' + n].style.visibility = 'hidden';
    tab = 0;
}

var tab = 0;
var tabtotal = 4
//--></script>

<style type="text/css"><!--
.myStyle {
    position: absolute;
    visibility: hidden;
}
//--></style>

</head>

<body onLoad="init()" bgcolor="#ffffff">

<layer id="l1" style="position:absolute; visibility:hidden;" onMouseOut="reveal(0)"></layer><span id="s1" class="myStyle" onMouseOut="hide(1)"></span><a href="default1.htm" onMouseOver="reveal(1)">File</a>&nbsp;&nbsp;
<layer id="l2" style="position:absolute; visibility:hidden;" onMouseOut="reveal(0)"></layer><span id="s2" class="myStyle" onMouseOut="hide(2)"></span><a href="default2.htm" onMouseOver="reveal(2)">Edit</a>&nbsp;&nbsp;
<layer id="l3" style="position:absolute; visibility:hidden;" onMouseOut="reveal(0)"></layer><span id="s3" class="myStyle" onMouseOut="hide(3)"></span><a href="default3.htm" onMouseOver="reveal(3)">View</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<layer id="l4" style="position:absolute; visibility:hidden;" onMouseOut="reveal(0)"></layer><span id="s4" class="myStyle" onMouseOut="hide(4)"></span><a href="default4.htm" onMouseOver="reveal(4)">Go</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<br>
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

</body>
</html>

Feedback on 'Q1136 How can I simulate a text toolbar across the top of the document?'

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.