Forum Moderators: open
I'm sure there's a simple solution for this, but I don't have any programming experience beyond HTML (which I know the basics of). I hope someone can help me. Thanks in advance.
If I am right, you are probably going to need to customize that code, so prepare yourself for a gentle learning curve.
A regular rollover dictates mouseout behavior when the cursor leaves the image. In this case, you don't want to trigger that behavior as long as the menu cascade is visible - which I assume is as long as the cursor is over the menu cascade.
So you'll need to identify the part of the script that removes the menu cascade, and add that image onmouseout behavior to that part of the code - which may also mean discovering how to reference that particular image since the behavior is no longer within that anchor tag.
I've made a lot of assumptions here, and I could be completely wrong. I also may not have explained the factors clearly enough. Let us know and we'll help you figure out your solution.
You will need to add the mouseover code on the button (that triggers the pull down menu), to the elements on the pulldown menu.
That is, when the user moves the mouse away from the menu button, there is some script there that tells the browser to show the off state. However, you want the user to see the on state while they are hovering over the drop down menu.
There are a few ways of doing this, but perhaps the simplist is to add the mouseover and mouseout script to the element on the drop down menu.
This will mean that while the user is over the links on the drop down menu, the button will remain in it's over state.
Agh!
The menu system that you are using means that making a simple addition to your html to cater for the top link hover state is out of the question. You would need to either make some additions to the menu javascript file, or switch to a different method of displaying the menu. One of the problems with these off the shelf menus (and I in no way mean that in a derogatory way), is that other than adding menu items etc., customising them is quite difficult for people not well versed in JavaScript.
Is it really that important that you retain the rollover effect? You could get rid of it altogether, as when the user hovers over the main link item, they get a drop down menu - a rollover effect in itself! To be honest, the rollover effect is lost as users will concentrate on the drop down menu and not see the colour change and shadow addition at all.
I'm sure there's a simple solution for this
I take it it'll be shifted out to an external file later on?
Very true, moving that to an external js file will reduce code clutter and should improve page rendering time.
If you (read client/boss!) are adamant on retaining the rollover effect, you could check out some of the other free scripts available on dynamicdrive and dhtmlcentral and other sites like this.
However, these will all still require you to look at the code and make the necessary changes in your html. Time allowing, a little bit of learning and you could create something like this yourself! Implementing this requires a knowledge of CSS, the DOM abd JavaScript, but exceedingly high level, IMO.
The principle is quite simple, you are basically triggering a javascript on mouseover that toggles the visibility of a layer between visible and hidden!
