How to use <mouseover> tag on a <td> to change <td> backgroundcolor... [Archive]

View Full Version : How to use <mouseover> tag on a <td> to change <td> backgroundcolor...

wenight

10-24-2007, 03:25 PM

How to use <mouseover> tag on a <td>. I wan to change <td> backgroundcolor...

boogyman

10-24-2007, 03:41 PM

post a url to the problematic site so we can help you troubleshoot
if your site is not published post the appropriate code wrapped in [code] tags

and read the Posting Policy (http://www.dynamicdrive.com/forums/showthread.php?t=24866)

djr33

10-24-2007, 07:11 PM

mouseover is not a tag.

onMouseover is an attribute, valid in some particular tags, such as <a>

I think that <td> will work with onMouseover, though I'm not sure that's valid (probably is, or some workaround).

Use is like this:
<tag onMouseover="javascripthere();">

ReMaX

10-24-2007, 08:08 PM

You do not need JS for that. Simply use css with a link as block element in every table cell:

<html>
<head>
<style type="text/css">
table
{
border:none;
}
table a, table a:visited
{
display:block;
width:100%;
height:100%;
background:#fff;
color:#000;
cursor:default;
text-decoration:none;
}
table a:hover
{
background:#ccc;
color:#fff;
}
</style>
</head>

<body>
<table>
<tr>
<td><a href="#">text 1</a></td>
</tr>
<tr>
<td><a href="#">bla bla bla bla<br /> bla bla bla bla bla bla</a></td>
</tr>
</table>
</body>

</html>
...that should work properly on every browser and it is valid HTML.

greetings
Max

djr33

10-24-2007, 09:18 PM

#fff and #ccc aren't really valid. Use #FFFFFF and #CCCCCC.

Plus, that requires an a tag, which may or may not be used in this and also will not entirely fill every TD, unless it is standardized... then what's the point?

wenight

10-25-2007, 10:32 AM

cannot use to change <td> background-image??

I try below idea... but don't work

# Testing{
Background:URL(Image/helo.jpg);
}

<Table>
<tr>
<td id="Testing">
<a href="aaa.html">Helo</a>
</td>
</tr>
</table>

chechu

10-25-2007, 11:31 AM

or like this ?

.menu li a:visited{
color: #aa2716;
}

.menu a:hover{
background-color: #F3F3F3;
color: #aa2716;
}

<ul class="menu">
<li><a href="">link</a></li>
</ul>[/CODE]

boogyman

10-25-2007, 11:40 AM

#fff and #ccc aren't really valid.
since when?

cannot use to change <td> background-image??

I try below idea... but don't work

# Testing{
Background:URL(Image/helo.jpg);
}

<Table>
<tr>
<td id="Testing">
<a href="aaa.html">Helo</a>
</td>
</tr>
</table>

there cannot be any space between the pound sign and the id

its also good to have a background color incase the image doesnt display due to the user having them disabled, or it being corrupt, or it being large so takes a while, etcetc.... you can use transparent to inherit the background color of the parent element.

#Testing {
background: #hexadecimal url('path/to/image');
}

wenight

10-25-2007, 12:41 PM

since when?

there cannot be any space between the pound sign and the id

its also good to have a background color incase the image doesnt display due to the user having them disabled, or it being corrupt, or it being large so takes a while, etcetc.... you can use transparent to inherit the background color of the parent element.

#Testing {
background: #hexadecimal url('path/to/image');
}

what mean by the #hexadecimal and inherit...? when I write the HTML always got inherit, fixed, Inline, static... can somebody explain it to me...?

wenight

10-25-2007, 12:54 PM

I try this but when my ouse over no effect...

#Testing table td:hover {
background-image:url(Helo.png);
}

<Table>
<tr>
<td id="Testing">
<a href="aaa.html">Helo</a>
</td>
</tr>
</table>

boogyman

10-25-2007, 12:56 PM

hexadecimal is
0-9 A-F
or as most would say html colors. transparent / inherit is using the value of the parent (above) element

eg...
<p>
<span>text</span>
</p>

<p> is the parent element of <span>

#Testing table td:hover {
background-image:url(Helo.png);
}

you did it backwards... you need to lay out the elements as they appear

<Table>
<tr>
<td id="Testing">
<a href="aaa.html">Helo</a>
</td>
</tr>
</table>

table tr td#Testing:hover {
property: value;
}

it is important to note though that IE6 and below doesnt support the psuedo selector :hover on anything but the achor a element.
so you would need to something like

td#Testing a:hover {
property:value;
}

PS. hello has two L's if you creating a page in the english language

chechu

10-25-2007, 01:10 PM

Try this one:

.menu li a:visited{
color: #aa2716;
}

.menu a:hover{
background-color: #F3F3F3;
color: #aa2716;
}

<table><tr><td>
<ul class="menu">
<li><a href="">link</a></li>
</ul>
</td></tr></table>
[/CODE]

djr33

10-25-2007, 01:19 PM

boogyman

10-25-2007, 01:26 PM

Boogyman, the character colors are just lazy; they seem to work, but it's as clumsy as using "white" or "red", and like <b> vs. <strong>, but if <b> had absolutely no proper use (ie, only when you want it explicitly bold, rather than just "strong").

i can see what you say about the shorthand hexidecimal, however there are 2 uses for <b> and <strong>

<b> is for presentational use, and is not interpreted by screen readers
<strong> is the proper use to emphasis importance and is interpreted by screen readers

there are clear uses for both, however <b> is often times over used by many amateur and professional developers alike.

eg

<p>I went to the grocery store, <b>Shaw's</b>, to pick up dinner</p>
<p>Mom said "Joshua <strong>GO</strong> clean your room"</p>

in the first sentence you just want to call attention to the store name visually, however the name of the store is not important in that sentence.
in the second sentence you want to call to emphasis in your mother having a raised voice when telling you to clean your room.

ReMaX

10-25-2007, 07:29 PM

Firstly, you cannot use the :hover effect on every object. Secondly, if you tried this in IE you have to know that IE only has :hover for links (a). I don't know how it works with td but try watching this in Firefox and you'll see.
BUT the proper way is, like chechu said, making a list!!!

good luck.
Max

boogyman

10-25-2007, 07:39 PM

Firstly, you cannot use the :hover effect on every object. Secondly, if you tried this in IE you have to know that IE only has :hover for links (a). I don't know how it works with td

IE6 and below simply will not do anything, I am not sure if IE7 supports the psuedo selector property yet.

The only way to get IE6 and below is to use the javascript hack which was designed for the list item, however can be modified to fit table data.

http://www.alistapart.com/articles/hybrid/

djr33

10-26-2007, 04:52 AM

Boogyman, there was a typo in my post earlier, but you seem to have interpreted it fine-- I meant to say "the 3 character color codes".

My example of b/strong was based on the condition (hypothetically) that b did have no proper use (I have used it frequently, when I want something specifically bold, rather than emphasized).

Again, it's better to think of "fff" as typing "white".

Dubstep

10-26-2007, 05:23 PM

<html>
<head>
<title>Mouse Over Highlight TD?</title>
</head>
<body>
<script type="text/javascript">
function highlight(id) {
document.getElementById(id).style.background = "#EEEEEE";
}
function unhighlight(id) {
document.getElementById(id).style.background = "#FFFFFF";
}
</script>
<table width="300" id="NameAndAge">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr id="1" onmouseover="highlight('1');" onmouseout="unhighlight('1');">
<td>Dubstep</td>
<td>19</td>
</tr>
<tr id="2" onmouseover="highlight('2');" onmouseout="unhighlight('2');">
<td>Dynamic</td>
<td>20</td>
</tr>
<tr id="3" onmouseover="highlight('3');" onmouseout="unhighlight('3');">
<td>Drive</td>
<td>21</td>
</tr>
</table>
</body>
</html>

Should work, I wrote it on the spot so havent tested it. In the end I guess its just the same as pseudo code.

Edit: Added in the ID's for each TR and it works fine.

Dubstep

10-26-2007, 05:25 PM

Oh sorry, you have to put the ID on each TR, as in id="1" for the first, id="2" for the second, etc.

jscheuer1

10-26-2007, 06:28 PM

Numbers as id's are a no-no.

Dubstep

10-28-2007, 04:05 PM

Numbers as id's are a no-no.

Whys that?

jscheuer1

10-28-2007, 04:35 PM

Numbers as id's are a no-no.

Whys that?

http://www.w3.org/TR/html401/types.html#h-6.2

Now, that's just a restatement of what I said, but it is by the group that sets the standards for HTML and other markup languages. That being the case, in and of itself, it means that no browser is required to recognize an id that begins with a number, so some may not. Additionally, a number is qualitatively different than a string in virtually all programming languages*, including javascript and the languages used to write browser code. So it is entirely possible that, even though (as most folks know) most browsers will generally have no problem with a number used for or to start an id value, it could happen to mess you up when you least expect it, and leave you scratching your head for some time trying to figure out the problem. If you just follow the rule to begin with and use - say:

id="na_1"
id="na_2"

etc., it will avoid any potential problem(s) arising from violating that particular convention.

* Numbers may be added to and subtracted from, multiplied and divided, etc., strings cannot, but strings can be added (concatenated) together using the same operator (+) as numbers use for addition. If you are using a string as a number, or visa versa, it may not behave as expected or desired in any code that you write or use to handle/process it.

izzmasterg

06-18-2010, 06:46 PM