show_menu, show_menu2, I'm stuck!

[CodeALot]

Ok guys, I wasted too much time now and all I get is frustration 

The task:
Create a menu, where the mouseover shows a background image (buttonover.png), and where that same background image should be visible in the menu_current.

I've tried several solutions using show_menu() and show_menu2(), I've read all the help- and instruction pages, and I simply can't get it to work properly.

The menu should be 150 pixels wide, the buttonover.png is 150 x 28 pixels and the menu-text (from WB) should be vertically aligned.

I'm not the guy that asks for 'turn-key' solutions in this forum, but I sure would appreciate some pointers in the right direction

Thanks in advance. I'm going to get some strong coffee.

(Edit: Sorry, I should have posted this in the "Snippets" forum, I guess...)

[brofield]

In summary:
Add the mouseover and mouseout javascript for showing and clearing the background image to the template for the menu. Add CSS for the menu_current class so that it has the background all of the time.

e.g. show_menu2(..., "<li onmouseover='mouseover(this)' onmouseout='mouseout(this)'> ... "
Note: I don't know the attrib names etc. Look that up yourself. Also decide whether you want to put it on the <li> or <a> etc.

The best way is to use static HTML for the menu and modify it and the CSS and Javascript until you get everything working the way you want it to. Then figure out how to coerce the menu function to generate that HTML.

B

[Ruud]

Why use mouseover with javascript?

It is much cleaner to use the normal a:hover selector.

something like:

Code: [Select]

#nav ul li a:hover, #nav ul li a:focus, #nav ul li.menu-current a {
    background: transparent url(buttonover.png)....etc
}
(a:focus also highlights when the menu is selected by the tab key)

Ruud

[brofield]

Yeah. Listen to him.

B

[CodeALot]

Thanks guys, I'll dive into it