What I have done is, I have put two scripts, one similar to my MenuBar called "REFLECTIONS" and the other script, like the one for "OnMouse Pop-Up", together. Incidentally, for the purpose of this example, I've kept the whole bit (that's including this Explanation part) in a No-frame Page. Nothing stops you from putting the MenuBar in a Frames Page.

For the JavaScript1.1 part, I've created this rather funny looking chap (I know I'm no great artist when it comes down to Graphics! Use this or replace with your own creation - I leave it to you to decide! Having achieved that, I've used a Freeware Graphics Chopper software called "ShoeString's Picture Dicer 0.39". Because I wanted the "eyes" to Open-Close-Move on each mouseover, I created a set of graphics (Six in all) altering the original EYEs!

I then used the Pom-Poms as Links. On each link mouseover the "eye" image changes & returns to original (eyes shut) on mouseout. As usual, this is done through "swapover & swapout" function calls. I had already explained this under "REFLECTION", so I'll skip it here.

Till here, the Script will work on all JavaScript1.1 Browsers. Now comes the DHTML part. To keep the page clean even on older browsers, the DHTML bit will only be written if the Browser is 4th Generation OR higher. This is achieved through

<script language = "javascript">
<!--
if(document.layers||document.all && !(document.getElementById)||document.getElementById)
document.writeln ('........')
//-->
</script>

statements. You'll understand it better if you download this & take a look at the script at the bottom of the page.

What this does is, on each mouseover, makes the "page name text" visible & hides it again on mouseout.

I should admit, this particular graphic has a certain limitation. There are only 5 Pom-Poms that can be used as LINKs. Of course, you can use the NOSE as well if you want. For the moment, I've left it almost BLANK! Move the cursor over the nose & see what happens!