onmouseout affects onclick event

[eldin]

Hello,

Im new to Javascript, and I've got a problem. I have a table, and if i move my mouse over a row, i want it to turn into another color. for that i use:

<TR bgColor='#FFFFE0'

onmouseover ="this.bgColor='#F0FAFF'"
onMouseout ="this.bgColor='#FFFFE0'">.

That works fine, but now i want to be able to click on a row, to make it another color. But when I use:

<TR bgColor='#FFFFE0'

onmouseover ="this.bgColor='#F0FAFF'"
onMouseout ="this.bgColor='#FFFFE0'"
onclick ="this.bgColor='#FFFFFF'">

it turns back to the normal color when i move my mouse out of the row, because of the onMouseout.

Can someone tell me how to solve this please?

thanks

[pbmods]

Heya, eldin. Welcome to TSDN!

Try using this.style.backgroundColor.

[EDIT: That won't solve your problem. Let's try this again...]

From what you've posted here, what I would probably do is is:

<tr
    style="background-color: #FFFFE0"
    onmouseover="setBGColor(this, 'F0FAFF');"
    onmouseout="setBGColor(this, 'FFFFE0');"
    onclick="this.onmouseout=null; setBGColor(this, 'FFFFFF');"
>
 

function setBGColor(element, color) {
    element.style.backgroundColor = '#' + color;
}
 
function resetMouseOut(element) {
    element.onmouseout = function() {
        setBGColor(element, 'FFFFE0');
    }
}
 

When you click on the row, it will clear the mouseout event handler. You can restore the mouseout handler by calling resetMouseOut.

[acoder]

Changed thread title.

[eldin]

ahh it works :D thanks very much

[iam_clint]

probably want to set the on mouse over to null also.

[eldin]

Indeed :P

new question:

I want to be able to click the color off again, so i tried some things with variables and the IF/ELSE function, (in combo with resetMouseOut)
But it didnt worked.. Can someone please explain how to do this?

thanks in advance

[iam_clint]

since you've already attempted doing this i'll give you an example of how i would do it and make it modular. (will work on any page)

in your table rows take off all your onmouseovers and styles and just put hover=true this script checks for that and dynamicly adds the functions. this make it look much cleaner.

<script>
var hoverColor = "#F0FAFF"; // set the color for when the mouse is hovering over the element
var defaultColor = "#FFFFE0"; // set the default color of the element when nothing has happened.
var clickedColor = "#FFFFFF"; // set the color of the element when it is clicked
var hoverColorClicked = "#F0F0FF" // set the color of the element when the mouse is over and the element has already been clicked.
var defcursor = "pointer"; // set the cursor for when the mouse is hovering over the element.
 
window.onload = setRowFunctions;
function setRowFunctions() {
    rows = document.getElementsByTagName("TR");
    for (i=0; i<rows.length; i++) {
        if (rows[i].getAttribute("hover")=="true") {
            rows[i].onmouseover = function() { this.style.backgroundColor = hoverColor; } //set the onmouseover function
            rows[i].onmouseout = function() { this.style.backgroundColor = defaultColor; }  //set the onmouseout function
            rows[i].style.backgroundColor = defaultColor; //set the default background color
            rows[i].style.cursor = defcursor; // set the default cursor
            rows[i].onclick = function() { handleClick(this); } // and finally the onclick event.
        }
    }
}
 
function handleClick(element) {
    if (element.getAttribute("clicked")==null || element.getAttribute("clicked")==false) {
    element.onmouseout = function() { this.style.backgroundColor = clickedColor; }
    element.onmouseover = function() { this.style.backgroundColor = hoverColorClicked }
    element.style.backgroundColor = clickedColor;
    element.setAttribute("clicked", true);
    } else {
    element.setAttribute("clicked", false);
    element.onmouseover = function() { this.style.backgroundColor = hoverColor }
    element.onmouseout = function() { this.style.backgroundColor = defaultColor; }
    element.style.backgroundColor = defaultColor;
    }
}
 
</script>
<body bgcolor="black">
<table>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
</table>
 

[eldin]

works great, but i can only select a row only once, but that doenst really matter. thanks a lot for the help :D

[tmerkaj]

works great, but i can only select a row only once, but that doenst really matter. thanks a lot for the help :D

try this

<HTML><HEAD>
<script language=javascript>
var clicked=false;
var mover = "#9e2aa2'";
var mout;
var last;
var savedColor;
</script>
</head>
<body onLoad="last=mytable.rows[0];">
<table id="mytable">

<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#e8e5d7" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#e8e5d7" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#e8e5d7" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
</table>
</body>
</html>

[siddharth2547]

Can You Please Explain The Above In C#.net

[iam_clint]

Can You Please Explain The Above In C#.net

no because this is javascript