What we have here is a "Cross Browser" DHTML Menubar. Cross Browser doesn't however mean that it will work on any browser. As I have mentioned in the FAQ section, it's only Good for the New Generation (4th or 5th) Browsers. To this extent, Cross Browser means, it would work on both NS4+ & IE4+. But don't fret, those with version 3s or even those with non-JavaScript Browsers, won't go back disappointed. I think I have provided adequate information in here for you to take sufficient precaution against such eventuality!
Right, now let's get on with the more difficult task! Explaining how can we make it work!!
So make yourself comfortable first - get yourself a cup of tea/coffee OR a can of your favourite Pop OR if you are so inclined, a pint of beer. You have quite a bit of reading to do!!
I have a few requests/conditions though. I have spent a lot of time to write this. All I ask from you in return is - do leave the credit part in the Script as it is please and then if you feel like being generous, you can place a link back to my page from yours AND sign my Guest Book. Fact is, you have nothing to lose, I & others like you gain 'cause your action will give me better exposure :). All of it will probably take you just 2 minutes. Thanks.
Having given some thought to this, I think there are couple of different ways to write this Menubar Code (basic code remains same - just the way it is inserted), such that while the DHTML will work on New Browsers, a usable Menubar will be available for those who still use old versions. But to start with, the basics...
The Basics
- "Showing" and "Hiding" are two actions/events supported only by New Generation Browsers. Here lies a catch! Netscape terms them as SHOW & HIDE (which refers to the VISIBILITY property) respectively while Microsoft terms them as VISIBLE & HIDDEN (So does the recently released Netscape 6). Further, the "document.objects" are also "pointed to" differently. And now we have Netscape6 - which is more in line with W3C recommendation than any other browser. However, for simple Show-Hide function that I've employed here, we can separate the DOMs for NS4, IE4 & then group IE5 & NS6 together. So the script has to be written such a way that all these browsers understand. I won't go into the details here, if you decide to use it take a look at the script - you'll get an idea, I am sure. For simple understanding, I have termed these two functions as changein and changeout respectively.
- Now, move your Mouse Pointer over any of the links (unless you have already done that!). Another line of TEXT will appear below the links (wiping off OR hiding the DEFAULT TEXT) which I have used to describe the contents of that particular Page PLUS the name of the Page on the right hand side of the Link buttons. These are hidden when the mouse is moved away & the default text shows up again.
- As for the links, I have created 5 NUMBER graphics (You can use whatever Graphic & as many as you need).
- Then comes the CSS (Cascading Style Sheet) bit. I have named the Style sheet that links to the Descriptions as ".pops" and Page Names as ".desc". The Style sheet includes the Font color (in this Example color:#004000). The Styling also includes, positioning (referred as POSITION:) which is measured from the absolute left hand top corner of the Frame/Window.
- Each of these "Quotation blocks" has to have an unique name (ID). I have called them "msg1, msg2 for the Descriptions & des1, des2 for the Names". Again, take a look at the script, you'll understand, what I'm finding reasonably difficult to explain, better!!
- As for the Page (Body) Background color/image, Frames width etc, change them as you wish/need. BUT, remember, if you change the size of the Frame, you may also have to change the "Absolute Positions" of the DIVISIONs, Font colors etc as you need.
We can now get on with the options.
Option: I
The trouble is, since the SHOW-HIDE won't work on older browsers, whatever you put in as Description/Name, will show up by default on all Browsers older than the 4th Generation ones. Frankly, that would make your page look awful. One of the easiest option could be to Create part of the Script/Document on the fly. That is, the browser should write the script only if it's 4th Generation or higher! For Example, this is how to write a document-on-the-fly:
<SCRIPT language="javascript">
if(ns4||ie4){
document.write('<div id="msg1" class="pops">');
document.write('Take you back to Explanation Page. Read it once more?');
document.write('</div>')
}
//-->
</SCRIPT>
There, however, exists a slight risk in writing too many lines on the fly!! A remote possibility will remain that one odd browsers won't read the script quickly enough & will give an Javascript Error Alert. If you have just 5~6 links with short descriptions, go ahead.
Option: II - The one that I have adopted here.
I have not gone into any complications & kept simple. Instead have done a small trick ("Cheap" some may say!!).
What I have done is within the opening body tag, I have specified the TEXT color SAME as the Background color, in this case, #ffffcd, like this:
<BODY BGCOLOR="#ffffcd" TEXT="#ffffcd" ...................... >
Therefore, the Browsers that ignore Style Sheets (that is, older browsers) will by default write the text in the color specified within the opening Body tag. Simply, put, even though the TEXT is actually there, you can't see it.