By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,814 Members | 2,162 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,814 IT Pros & Developers. It's quick & easy.

tab menu - change tabs onmouseover, onmouseout, onclick

oll3i
100+
P: 679
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
  1. a.menu_on_mouse_over{
  2. width:80px;
  3. height:22px;
  4. float:left;
  5. text-align:center;
  6. margin-top:0;
  7. margin-right:1px;
  8. margin-bottom:0;
  9. margin-left:0;
  10. font-size:100%;
  11. text-decoration:none;
  12. color:#FFF;
  13. font-weight:bold;
  14. background:url(../images/top_menu_hover.gif) left top no-repeat;  
  15. padding:3px 0 0 0;
  16. }
  17.  

the css is in css/menu.css
and images are in folder
images/top_menu_hover.gif
Jul 2 '08 #1
Share this Question
Share on Google+
10 Replies


oll3i
100+
P: 679
in js menu i have
Expand|Select|Wrap|Line Numbers
  1. 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">');
  2. document.write(this.var1);
  3. document.write('</a></li>');
  4.  
thank You
Jul 2 '08 #2

oll3i
100+
P: 679
maybe i should have posted it on javascript forum?
Jul 2 '08 #3

oll3i
100+
P: 679
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
  1. a.menu_on_mouse_over{
  2. width:80px;
  3. height:22px;
  4. float:left;
  5. text-align:center;
  6. margin-top:0;
  7. margin-right:1px;
  8. margin-bottom:0;
  9. margin-left:0;
  10. font-size:100%;
  11. text-decoration:none;
  12. color:#FFF;
  13. font-weight:bold;
  14. background:url(../images/top_menu_hover.gif) left top no-repeat;  
  15. padding:3px 0 0 0;
  16. }
  17.  
  18.  
and then in menu.js file in display function i have
Expand|Select|Wrap|Line Numbers
  1. 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">');
  2. document.write(this.var1);
  3. document.write('</a></li>');
  4.  
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
Jul 2 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Rather than just className, you need this.className.

PS. merged threads.
Jul 2 '08 #5

oll3i
100+
P: 679
thanks for merging threads
... but even with "this" still doesn't work
Jul 2 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Where is the display function called?
Jul 2 '08 #7

oll3i
100+
P: 679
the display finction is called in my jsp file
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var menu = new Menu();
  3. menu.display();
  4. </script>
  5.  
look please at the document.write in my 4th post this line is part of display function
Jul 3 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Is it just the image that it's not finding or none of the CSS rules are being applied?
Jul 3 '08 #9

oll3i
100+
P: 679
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
Jul 3 '08 #10

acoder
Expert Mod 15k+
P: 16,027
Barking up the wrong tree all along, eh? As you say, it happens. Glad you've got it sorted.
Jul 3 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.