...

View Full Version : How to prevent onmouseout overriding onfocus?



ktsixit
05-08-2009, 10:43 AM
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:


<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>

abduraooft
05-08-2009, 12:07 PM
Validate your code (http://validator.w3.org/#validate_by_input) 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

ktsixit
05-08-2009, 12:50 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum