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

Expand|Select|Wrap|Line Numbers

 
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

Expand|Select|Wrap|Line Numbers

 
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

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

Expand|Select|Wrap|Line Numbers

 
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

Expand|Select|Wrap|Line Numbers

 
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

Expand|Select|Wrap|Line Numbers

 
<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