Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Mouse over effect not working as I expect.

    Hello friends,

    I am trying to setup a tab for our menus and have a mouse over effect that when the mouse is on the tab to bold the text, and when it leaves the tab to italics the text.

    This works except the mouse cursor changes from a pointer to a text I-beam and I think that is causing the mouse out event. How do I prevent this.

    Maybe there is a better way. Your advice is appreciated. Thank you.

    Joseph - newbie


    <table id="Menu-Tab" width="572" height="27" background="images/Tab-Blank.Gif" cursor="arrow">
    <td id="bTab1" width="95" align="center" onmouseout="bTab1.innerHTML='<i>Banquet</i>'" onmouseover="bTab1.innerHTML='<b>Banquet</b>'"><b>Banquet</b></td>
    <td id="lTab" width="95" align="center" onmouseover="lTab.innerHTML='<b>Luncheon</b>'" onmouseout="lTab.innerHTML='<i>Luncheon</i>'"><i>Luncheon</i></td>
    <td id="pTab" width="95" align="center" onmouseover="pTab.innerHTML='<b>Picnic</b>'" onmouseout="pTab.innerHTML='<i>Picnic</i>'"><i>Picnic</i></td>
    <td id="bTab2" width="95" align="center" onmouseover="bTab2.innerHTML='<b>Breakfast</b>'" onmouseout="bTab2.innerHTML='<i>Breakfast</i>'"><i>Breakfast</i></td>
    <td id="fTab" width="95" align="center" onmouseover="fTab.innerHTML='<b>Funeral</b>'" onmouseout="fTab.innerHTML='<i>Funeral</i>'"><i>Funeral</i></td>
    <td id="aTab" width="95" align="center" onmouseover="aTab.innerHTML='<b>Appetizer</b>'" onmouseout="aTab.innerHTML='<i>Appetizer</i>'"><i>Appetizer</i></td>
    <td width="2"></td>
    </table>

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Code:
    <html>
    <head>
    <style type="text/css">
    .texton{
    font-weight:bold;
    font-style:normal;
    }
    
    .textoff{
    font-weight:normal;
    font-style:italic;
    }
    </style>
    </head>
    <body>
    <table id="Menu-Tab" width="572" height="27" background="images/Tab-Blank.Gif" cursor="arrow">
    <tr><td id="bTab1" width="95" align="center" class = "textoff" onmouseout="this.className='textoff';" onmouseover="this.className='texton';">Banquet</td></tr>
    ...etc
    </table>
    </body>
    </html>
    Last edited by NancyJ; 12-13-2005 at 04:04 PM.

  • #3
    New Coder
    Join Date
    Nov 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thank you for ypur much needed help.

    Hello NancyJ,

    Thank you very much for your advice.
    I tried it and it works great, but of course you know this.

    When I finish with the upgrade to our site I will send you a link.
    Thank you so much.

    Joseph


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •