One of my visitors recently asked me a question and that was "Is there a way around to incorporate the effect that can be had with a:hover on Internet Explorers into Netscape Browsers?" If you don't know what's "a:hover", take a look at my Menubar called "Alternate Links" under Simple CSS - Style Sheets
Problem is, Netscape Browsers (until the recently released Netscape6 - which does support the pseudo class a:hover - therefore, to certain extent makes this script redundant!!) do not recognize a:hover. The only way to overcome this is to simulate the effect. Ideally (& as far as I'm concerned - 'theoratically') what can be done is to Create a NEW LAYER on mouseover which will over-write the initial 'div' tag style description. I did try this method - but found, for some reason, the responce is VERY slow. I presume, it's the time the Browser needs to write a New Layer according to the script, dynamically. In fact, if I tried to change the TEXT COLOR alone, it takes a second or two to react (on my P-III. Presumably it'll be slower on slower machines.)
Therefore, I found this rather 'short cut' method. It does NOT ACTUALLY vary the Layer property of the Link itself, that is, the TEXT style remains unchanged - but still, gives you some what similar efffect. As I said, limitation being that whatever STYLE was specified for the Link text - remains as it is. Her's what I have done.
- First of all, you need 2 sets of style tags - for each link.
- Then you decide on the attributes for the "a" tags - ie, Font-Size, Font-Face, Font-Color etc. The second layer which is hidden by default has identical attributes and a few extra. These extras that show through onMouseover. It's this simple.
- These EXTRAs can include, Underlining, Background Color, Shadow text effect etc.
- The a tag style has been included because the mouseover function works with HyperLinks only (<a href=........>).
- Just to ensure that the "hidden layers" do not show up on old browsers, you can get the second layers to be written on the fly.
- Finally, the Script calls for TWO functions (I have named them changein & changeout) which controls the SHOW-HIDE effects.
One IMPORTANT point to remember here is that the Background layer MUST have a lower "z-index" number than the corresponding link z-index. Otherwise, onmouseover, the background will actually tend to be the Foreground - hiding the Link!! Ones you have seen the script you'll understand it better.
Finally, got the JavaScript to show this clear image layer on mouseover & hide it onmouse out. Doesn't look too bad! Well, that's in liew of a:hover!
PS:
It's all yours if you want. As usual, you can break it, twist it, use it or dump it! In the meantime, I'll be absolutely delighted if you give me two minutes & sign my Guestbook. Thanks.
