By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,118 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

How do you swap foreground & background colors for a link (or any element)?

P: n/a
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>

Sep 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
saz
In article <11**********************@z14g2000cwz.googlegroups .com>,
fr************@gmail.com says...
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>


Use CSS:

<!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">
<style type="text/css">

a {
background-color: #ffffff;
color:#0000ff;
}

a:visited {
background-color: #ffffff;
color:#0000ff;
}

a:active {
background-color: #ffffaa;
color:#000000;
}

a:hover {
background-color: #ffffaa;
color:#000000;
}

</style>
</head>

<body>
<a href="Contact.html">Contact</a>
</body>

Sep 20 '05 #2

P: n/a

Fr******@Bowen.net wrote:
WITHOUT KNOWING ANYTHING ABOUT THE CURRENT COLORS, I want to swap the
foreground/background colors of a link when someone hovers over it.


Impossible in CSS, easy in JS

Remember that "colours" aren't an integer type, they're three integers
packed into sub-fields within that large integer. If you're swapping
them or XORing them then this doesn't matter, but if you're doing an
operation like subtraction where there's a risk of carrying between
bits (and thus between RGB channels) then you need to split the colour
value into RGB components first, subtract each one individually and
then put them back together.

Sep 21 '05 #3

P: n/a
saz wrote:
In article <11**********************@z14g2000cwz.googlegroups .com>,
fr************@gmail.com says...
WITHOUT KNOWING ANYTHING ABOUT THE CURRENT COLORS, I want to swap the
foreground/background colors of a link when someone hovers over it.
Use CSS:

[snip] a {
background-color: #ffffff;
color:#0000ff;
}

a:visited {
background-color: #ffffff;
color:#0000ff;
}

a:active {
background-color: #ffffaa;
color:#000000;
}

a:hover {
background-color: #ffffaa;
color:#000000;
}


Try as I might, I don't see how this *swaps* the foreground and
background colors as the OP asked, nor how this amounts to not knowing
what the current colors are, as he specified.
Sep 21 '05 #4

P: n/a
saz
In article <3p************@individual.net>,
hm*******************@comcast.net says...
saz wrote:
In article <11**********************@z14g2000cwz.googlegroups .com>,
fr************@gmail.com says...
WITHOUT KNOWING ANYTHING ABOUT THE CURRENT COLORS, I want to swap the
foreground/background colors of a link when someone hovers over it.

>
Use CSS:

[snip]
a {
background-color: #ffffff;
color:#0000ff;
}

a:visited {
background-color: #ffffff;
color:#0000ff;
}

a:active {
background-color: #ffffaa;
color:#000000;
}

a:hover {
background-color: #ffffaa;
color:#000000;
}


Try as I might, I don't see how this *swaps* the foreground and
background colors as the OP asked, nor how this amounts to not knowing
what the current colors are, as he specified.


I ignored the bold line because he was setting colors in his code. To
me that meant that he DID have colors in mind.

Many posters in this group contradict themselves, I thought he was one
of them.
Sep 21 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.