/****************************************************************************************************** DHTML Show/Hide script written by Mark Wilton-Jones - 2001 ******************************************************************************************************* Please see http://www.howtocreate.co.uk/jslibs/ for details of this script Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use To use: _________________________________________________________________________ Inbetween the <head> tags, put: <script type="text/javascript" language="javascript1.2"> <!-- //this is optional and therefore does not need to be defined if unwanted var myalternative = "LOCATION OF ALTERNATIVE PAGE, JUST IN CASE THEIR BROWSER DOESN'T GET IT RIGHT"; //--> </script> <script src="PATH TO SCRIPT/showhide.js" type="text/javascript" language="javascript1.2"></script> if you haven't got an alternative (You should have one for all those people out there who can't use JavaScript anyway . . .), simply omit the line defining var myalternative; _________________________________________________________________________ Now create the bits that you want to show and hide (only one will be shown at a time): <div id="ID OF DIV" style="position:absolute;left:20px;top:25px;visibility:hidden;"> contents go in here </div> You can change the numbers after the 'left:' and 'top:' bits to position it on the page _________________________________________________________________________ To show a div, put: <a href="javascript:showdiv('ID OF DIV');" onmouseover="showdiv('ID OF DIV')">Link words</a> DO NOT leave out the " and ' bits. _________________________________________________________________________ To hide the div that is showing, put: <a href="javascript:hidediv();" onmouseover="hidediv()">Link Words</a> If a new div is being displayed, the old one will be hidden anyway. ******************************************************************************************************* And here's the actual code ******************************************************************************************************/ //You will notice that I never actually detect the browser type, I just //detect its capabilities and then use them. This means that if someone //uses a browser that I don't know, but is able to use either method, it //will still work. window.onerror = null; //initialise all variables var olddiv = 0; //this will become a reference to the object that is being shown or was last shown //in all cases, the object that is shown/hidden will be a <div ..> element function getRefToDivNest( divID, oDoc ) { if( !oDoc ) { oDoc = document; } if( document.layers ) { if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else { for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) { y = getRefToDivNest(divID,oDoc.layers[x].document); } return y; } } if( document.getElementById ) { return document.getElementById(divID); } if( document.all ) { return document.all[divID]; } return document[divID]; } function showdiv(thisdiv) { //this function shows the div hidediv(); //first, hide the last one //Convert the name of the div into a reference to it. Basically, get a reference to the object olddiv = getRefToDivNest(thisdiv); if( !olddiv ) { //Nothing found. This browser is not compliant with any! notifyFail(); return; } //Make the object visible if( olddiv.style ) { //DOM compliant olddiv.style.visibility = 'visible'; } else { if( olddiv.visibility ) { //Netscape and old versions of Mozilla compliant olddiv.visibility = 'show'; } else { //Nothing found, no known way of changing the style notifyFail(); return; } } divshown = 1; } function hidediv() { if( olddiv ) { if( olddiv.style ) { //DOM compliant olddiv.style.visibility = 'hidden'; } else { //Netscape and old versions of Mozilla compliant olddiv.visibility = 'hide'; } //No need for else notifyFail() //If it was going to fail, it would have failed while it was being shown } olddiv = false; } function notifyFail() { //oops, I guess nothing works in this browser if( window.myalternative ) { if( window.confirm( "You are having problems displaying some components of this page.\n"+ "\nWould you like to try the other page design?" ) ) { location.href = myalternative; } } else { window.alert( "You are having problems displaying some components of this page.\n\n"+ "Sorry, but there is not yet an alternative page." ); } }