Changing the background of a row

K

KDawg44

Hi,

I am trying to change the background of a row onMouseOver and it is
not working. I am not a javascript expert so I am sure i a missing
something...

here is my code. The first part is the html generated by PHP and the
second is the javascript function.

PHP/HTML:

<table border = 1 width = '15%' cellpadding = 0 cellspacing =
0><tr><td class = 'regText' onClick = 'showAppointment(" . $queryDay .
", " . $queryMo . ", " . $queryYr . ");'
onMouseOver='highlightItem(this);' onMouseOut='highlightItem(this);'
align = 'middle'>"



JavaScript:

function highlightItem(item) {
if (item.bgcolor == '#FF00CC') {
item.bgcolor = 'gray';
} else {
item.bgcolor = '#FF00CC';
}
}


I don't get any errors in the error console but no colors change.

Thanks.

Kevin
 
S

SAM

KDawg44 a écrit :
Hi,

I am trying to change the background of a row onMouseOver and it is
not working. I am not a javascript expert so I am sure i a missing
something...

here is my code. The first part is the html generated by PHP and the
second is the javascript function.

PHP/HTML:

<table border = 1 width = '15%' cellpadding = 0 cellspacing =
0><tr><td class = 'regText' onClick = 'showAppointment(" . $queryDay .
", " . $queryMo . ", " . $queryYr . ");'
onMouseOver='highlightItem(this);' onMouseOut='highlightItem(this);'
align = 'middle'>"



JavaScript:
Click to expand...

Since most of browsers do not stock colors in hexa format (#xxyyzz)
asking them if the color is #ff00cc means nothing for them

You would have to work with classes

CSS (in this order) :
====
..regText { background: #999 }
..fushia { background: #f0c; }

jS :
====
function highlightItem(item) {
item.className = item.className=='regText'?
'regText fushia' : 'regText';
}
 
B

Bart Van der Donck

KDawg44 said:
I am trying to change the background of a row onMouseOver and it is
not working.  I am not a javascript expert so I am sure i a missing
something...
Click to expand...

--------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<title>MouseOver colour switch</title>
<script type="text/javascript">
function omo(it) {
if (it && it.style) it.style.backgroundColor = 'orange';
}
function omout(it) {
if (it && it.style) it.style.backgroundColor = '#FFCCCC';
}
</script>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr onmouseover="omo(this);"
onmouseout="omout(this);"
style="background-color: #FFCCCC; cursor: pointer;">
<td>some text</td>
<td>more text</td>
</tr>
</table>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Changing a background-color 2
Image shifts to the right when export the page to pdf 4
Background image not showing up on html page 3
Help with Visual Lightbox: Scripts 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Why is the e.target not working here? 1
Having trouble centering contents of td ? 3

Members online

Total: 25 (members: 3, guests: 22)
Robots: 361

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top