View Full Version : td bgcolor change on hover?


fruitcake
04-24-2004, 12:59 AM
Can I get the td background colour to change on a hover (like these forums used to do)
Would I have to do a mouseover event for each? Or is there a simpler way to do it. If not, is there a way to get the one mouseover to apply to all tds?
Thanks!

stargrl329
04-24-2004, 01:07 AM
http://www.adesdesign.net/php/tutorials/css/table_bgchange.php

As far as I know, the mouseover effect has to be included in every td. There may be some way to code it using Javascript IDs, but I'm not very familiar with JS so I'm not sure.

fruitcake
04-24-2004, 01:08 AM
Thanks, I'll take a look at that. It's not absolutely critical anyway, just asthetics :)

CevilgeniuS
04-24-2004, 01:31 AM
It's javascript... just copy and paste

http://www.dynamicdrive.com/dynamicindex11/highlighttable.htm
<script type="text/javascript">

/***********************************************
* Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"

var ns6=document.getElementById&&!document.all
var ie=document.all

function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}

function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||sour ce.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}

</script>

That goes into your head.

It'll affect all your cells. If you want it to not highlight you put in the attribute id="ignore" in your TD tag.

Credit to Dynamic Drive

-Norm

horse*chica
04-24-2004, 01:52 AM
Here's another link; the coding for this one looks less intimidating (to me, anyway, haha): http://wdt.silent-aurora.net/html11.php

Calidris
04-24-2004, 02:08 AM
<style>
td:hover { background: red; }
tr:hover { background: green; }
</style>
Good browsers support this, IE doesn't. BUT... I've recently come across a great solution: download this file:
Thox, no links to your own site please.

Then save that with your site and use this CSS:
body { behavior: url('csshover.htc'); } and now you can make IE support :hover properly :D

My menu demonstation page shows this in action:
Thox, no links to your own site please.

Calidris
04-24-2004, 04:13 AM
This site explains the same script.
http://www.xs4all.nl/%7Epeterned/csshover.html

Can moderators leave a name please? That way I can query you rather than assume I'm allowed to post the link above :)

Dude128
04-24-2004, 04:29 AM
you've signed up at least twice, you should be familiar with the rules by now :)

no advertising means just that- don't post URLs to your own site.