469,142 Members | 1,170 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,142 developers. It's quick & easy.

tab menu - change tabs onmouseover, onmouseout, onclick

oll3i
679 512MB
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
10 17012
oll3i
679 512MB
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
679 512MB
maybe i should have posted it on javascript forum?
Jul 2 '08 #3
oll3i
679 512MB
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
16,027 Expert Mod 8TB
Rather than just className, you need this.className.

PS. merged threads.
Jul 2 '08 #5
oll3i
679 512MB
thanks for merging threads
... but even with "this" still doesn't work
Jul 2 '08 #6
acoder
16,027 Expert Mod 8TB
Where is the display function called?
Jul 2 '08 #7
oll3i
679 512MB
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
16,027 Expert Mod 8TB
Is it just the image that it's not finding or none of the CSS rules are being applied?
Jul 3 '08 #9
oll3i
679 512MB
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
16,027 Expert Mod 8TB
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.

Similar topics

2 posts views Thread by RWD | last post: by
10 posts views Thread by John Ortt | last post: by
2 posts views Thread by Jackson Yap | last post: by
3 posts views Thread by rsteph | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.