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
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts

    Question How to prevent onmouseout overriding onfocus?

    Hello, I'm trying to use javascript to control a table's td styles. What I want to achieve is to
    - apply style A onmouseover
    - apply style B onmouseout
    - apply style A onfocus

    The problem is that the mouseout event overrides the focus event. Also I'd like each element to stay on the focus state until another element gets clicked. Can you help me a little?

    This is my code:

    Code:
    <script language="javascript" type="text/javascript">
    function HoverStyle(element) {
    document.getElementById(element).style.backgroundImage = "url(images/arrow1.jpg)";
    }
    function OutStyle(element) {
    document.getElementById(element).style.backgroundImage = "url(images/arrow2.jpg)";
    }
    function FocusStyle(element) {
    document.getElementById(element).style.backgroundImage = "url(images/arrow1.jpg)";
    }
    </script> 
    
    <table id="ingedients-list" width="250" cellspacing="0" cellpadding="0">
         <tr>
              <td id="1"><a href="#" onmouseover="HoverStyle('1')" onmouseout="OutStyle(1)" onfocus="FocusStyle(1)">aaaaa</a></td>
         </tr>
         <tr>
              <td id="2"><a href="#" onmouseover="HoverStyle('2')" onmouseout="OutStyle(2)"  onfocus="FocusStyle(2)">bbbbb</a></td>
         </tr>
         <tr>
              <td id="3"><a href="#" onmouseover="HoverStyle('3')" onmouseout="OutStyle(3)"  onfocus="FocusStyle(3)">cccccc</a></td>
         </tr>
    </table>
    Last edited by ktsixit; 05-08-2009 at 10:50 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate your code and fix all the errors in your markup first.

    btw, you could use a CSS based trick, which is more reliable, unlike a javascript based one, see http://www.w3schools.com/CSS/css_pseudo_classes.asp
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    abduraooft, the code I posted is here is typical just to show you the logic of what I want to do.

    I am aware of the pseudo classes in css but they do not work properly, especially on ie6 (The td:hover is ignored by ie in my code, and the focus effect is gone in css when I click in another spot of the page), that's why I chose javascript.

    Do you have anything to suggest about overriding the hover effect?
    Last edited by ktsixit; 05-08-2009 at 11:54 AM.


  •  

    Posting Permissions

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