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

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

Code:

<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

Code:

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

Code:

.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

Originally Posted by djr33

#fff and #ccc aren't really valid.

since when?

Originally Posted by wenight

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

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

Code:

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

Code:

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

**wenight** · 10-25-2007, 12:41 PM

Originally Posted by boogyman

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.

Code:

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

Code:

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

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

Thread: How to use <mouseover> tag on a <td> to change <td> backgroundcolor...

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions