WITHOUT KNOWING ANYTHING ABOUT THE CURRENT COLORS, I want to swap the
foreground/background colors of a link when someone hovers over it. Is
this possible with HTML, CSS, DOM, & JavaScript? If so, how?
See my HTML below (or go to my test page at
http://fmbbowen.com:39353/misc/Misc.html). I also tried treating
..color as a number and subtracting the current color from 0xFFFFFF but
that did not work either. The numerous examples I looked at all set
the colors explicitly which is what I want to avoid.
Thanks!
=================== HTML below ===================
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
<meta content="Franklin Bowen" name="author">
<script language="JavaScript" type="text/javascript">
<!--
function highlightLink(link)
{
// link.style.color = "#000000";
// link.style.backgroundColor = "#FFFFAA";
var swapColor = link.style.color
link.style.color = link.style.backgroundColor
link.style.backgroundColor = swapColor
link.style.fontWeight = "bolder";
}
function plainLink(link)
{
// link.style.color = "#0000FF";
// link.style.backgroundColor = "#FFFFFF";
var swapColor = link.style.color
link.style.color = link.style.backgroundColor
link.style.backgroundColor = swapColor
link.style.fontWeight = "normal";
}
-->
</script>
</head>
<body>
<H3>050920 Swap foreground & background colors when hover over
link</H3>
<a href="Contact.html" onmouseover="highlightLink(this)"
onmouseout="plainLink(this)">Contact</a>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01
Transitional" height="31" width="88">
</a>
</p>
</body>
</html>
