TD Hover 1

[cyberprof]

I am using a CSS for my table design

I have a table with a hyperlink in each cell. How can I make the background of the cell change colour when I hover over the cell or the link in the cell.

Cheers

J

 

[deecee]

put this in your TD tag

onmouseover="this.style.background='#ccccc'" onmouseout="this.style.background='#Original Color'"

Listen All I ask is that You close out a Post You Started!!!!

 

[YNOTU]

Even though there are many ways of doing this and since I only work with the IE I tend to use this

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

<script language=jscript>

var currRow = -1;
var selRow = -1;

if (element.tagName == 'TABLE')
{
element.attachEvent('onmouseover', onMouseOver);
element.attachEvent('onmouseout', onMouseOut);
element.attachEvent('onclick', onClick);
}
else
{
alert(&quot;Error: tablehl not attached to a table element&quot;
}

function cleanup()
{
hilite(-1);

element.detachEvent('onmouseover', onMouseOver);
element.detachEvent('onmouseout', onMouseOut);
element.detachEvent('onclick', onClick);
}

function onClick()
{
srcElem = window.event.srcElement;

//crawl up the tree to find the table row
while (srcElem.tagName != &quot;TR&quot; && srcElem.tagName != &quot;TABLE&quot
srcElem = srcElem.parentElement;

if(srcElem.tagName != &quot;TR&quot return;

if(srcElem.rowIndex == 0 ) return;

if (selRow != -1) selRow.runtimeStyle.backgroundColor = '';

srcElem.runtimeStyle.backgroundColor = slColor;
selRow = srcElem;

var oEvent = createEventObject();
oEvent.selected = selRow;
rowSelect.fire(oEvent);
}

function onMouseOver()
{
srcElem = window.event.srcElement;
//crawl up to find the row
while (srcElem.tagName != &quot;TR&quot; && srcElem.tagName != &quot;TABLE&quot
srcElem = srcElem.parentElement;

if(srcElem.tagName != &quot;TR&quot return;

if (srcElem.rowIndex > 0)
hilite(srcElem);
else
hilite(-1);

}

function onMouseOut()
{
// Make sure we catch exit from the table
hilite(-1, -1);
}

function hilite(newRow)
{
if (hlColor != null )
{
if (currRow != -1 && currRow!=selRow)
{
currRow.runtimeStyle.backgroundColor = '';
}

if (newRow != -1 && newRow!=selRow)
{
newRow.runtimeStyle.backgroundColor = hlColor;
}
}
currRow = newRow;
}

</script>

[tt]

​

​

 

[Vragabond]

I would suggest a css solution:

<style type=&quot;text/css&quot;>
a.navigation:link, a.navigation:visited {
 display: block;
 width: 100%;
 background: #333333;
 text-decoration: none;
}

a.navigation:hover {
 background: #777777;
}
</style>

<table style=&quot;width: 150px;&quot;>
 <tr>
  <td><a class=&quot;navigation&quot; href=&quot;uri1.html&quot;>Link 1</a></td>
 </tr>
 <tr>
  <td><a class=&quot;navigation&quot; href=&quot;uri2.html&quot;>Link 2</a></td>
 </tr>
 <tr>
  <td><a class=&quot;navigation&quot; href=&quot;uri3.html&quot;>Link 3</a></td>
 </tr>
</table>

Hope it helps.

 

[cyberprof]

Thanks Vragabond. That worked fine. Now, how can a make the hyperlink text stay the same colour, even though the page has been visited.

 

[Vragabond]

Just add the color attribute to the first part of the css:
a.navigation:link, a.navigation:visited {
display: block;
width: 100%;
background: #333333;
text-decoration: none;
color: black;
}

 

[cyberprof]

Thanks for your help!!