tab menu - change tabs onmouseover, onmouseout, onclick

[oll3i]

i wrote css class for a href but when i add this class to link it doesnt see the image but when i add the inline css it sees it
i m writing javascript tab menu and i want tabs to change on mouse over, on mouse out and on click

a.menu_on_mouse_over{
width:80px;
height:22px;
float:left;
text-align:center;
margin-top:0;
margin-right:1px;
margin-bottom:0;
margin-left:0;
font-size:100%;
text-decoration:none;
color:#FFF;
font-weight:bold;
background:url(../images/top_menu_hover.gif) left top no-repeat;  
padding:3px 0 0 0;
}

the css is in css/menu.css
and images are in folder
images/top_menu_hover. gif

[oll3i]

in js menu i have

document.write('<li style="display:inline;"><a href=\'/HRDB/candidates/index.jsp?sortby=name,f=1,switch_f=1,modul=candidates\'  onclick="className=\'menu_on_mouse_over\'" onmouseover="className=\'menu_on_mouse_over\'" onmouseout="className=\'menu_on_mouse_out\'" class="menu_on_mouse_out">');
document.write(this.var1);
document.write('</a></li>');

thank You

[oll3i]

maybe i should have posted it on javascript forum?

[oll3i]

tab menu - change tabs onmouseover, onmouseout, onclick

i got back to my jsp project i don't know how to write js tab menu without document.write as You suggested before so I'm stuck

i wrote css class for a href but when i add this class to link it doesnt see the tab background image but when i add the inline css it sees it
i want tabs to change on mouse over, on mouse out and on click

a.menu_on_mouse_over{
width:80px;
height:22px;
float:left;
text-align:center;
margin-top:0;
margin-right:1px;
margin-bottom:0;
margin-left:0;
font-size:100%;
text-decoration:none;
color:#FFF;
font-weight:bold;
background:url(../images/top_menu_hover.gif) left top no-repeat;  
padding:3px 0 0 0;
}

and then in menu.js file in display function i have

document.write('<li style="display:inline;"><a href=\'/HRDB/candidates/index.jsp?sortby=name,f=1,switch_f=1,modul=candidates\'  onclick="className=\'menu_on_mouse_over\'" onmouseover="className=\'menu_on_mouse_over\'" onmouseout="className=\'menu_on_mouse_out\'" class="menu_on_mouse_out">');
document.write(this.var1);
document.write('</a></li>');

it doesnt throw any error now

the css is in css/menu.css
and images are in folder
images/top_menu_hover. gif

thank You

[acoder]

Rather than just className, you need this.className.

PS. merged threads.

[oll3i]

thanks for merging threads
... but even with "this" still doesn't work

[acoder]

Where is the display function called?

[oll3i]

the display finction is called in my jsp file

<script>
var menu = new Menu();
menu.display();
</script>

look please at the document.write in my 4th post this line is part of display function

[acoder]

Is it just the image that it's not finding or none of the CSS rules are being applied?

[oll3i]

hmm i forgot to add css file to jsp file hihi it works now :) thank You next time i will know that i have to check if i included the file first before i post something but it happens sometimes

[acoder]

Barking up the wrong tree all along, eh? As you say, it happens. Glad you've got it sorted.