PDA

Click to See Complete Forum and Search --> : Newbie Question: changing colors

knthrak1982
10-28-2003, 05:16 AM
Here is an example of code I'm writing for a contents frame. The mouseOver changes the color of all three links at once. I want the onMouseOver to change the color of the individual link on which the mouse is over. I know exactly why I'm gettting these results, as I'm changing a property of the entire document, but I don't know how to correct the problem.
Please help.


<html>
<HEAD>
<TITLE>My Page</TITLE>

<SCRIPT LANGUAGE="JavaScript">
function color(c){
document.linkColor=c;
document.alinkColor=c;
document.vlinkColor=c;
}
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#000000" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF" VLINK="#00FF00">
<BR><BR><BR><BR><BR><BR>
<UL>
<LI><A HREF="home.html" TARGET="r" onMouseOver="color('#FF0000'); window.status='Home'; return true" onMouseOut="color('#00FF00'); window.status=''; return true">Home</A>
<LI><A HREF="about.html" TARGET="r" onMouseOver="color('#FF0000'); window.status='About The Creator'; return true" onMouseOut="color('#00FF00'); window.status=''; return true">About The Creator</A>
<LI><A HREF="contact.html" TARGET="r" onMouseOver="color('#FF0000'); window.status='Contact Me'; return true" onMouseOut="color('#00FF00'); window.status=''; return true">Contact Me</A>
</UL>
</BODY>

</HTML>
Gollum
10-28-2003, 06:40 AM
So you want to change the colour of the link under the mouse...

Changing the colours of every link on the page is as you quite rightly say is not the best way to do this ;)

a simple combination of styles and Javascript should help.
Have a look at this example...

<html>
<head>
<style type="text/css">

.mOver
{
color: red;
}

.mOut
{
color: blue;
}

</style>
</head>
<body>
Link test<br>
<a href="test.html" onmouseover="this.className='mOver';" onmouseout="this.className='mOut';" class="mOut">Link1</a><br>
<a href="test.html" onmouseover="this.className='mOver';" onmouseout="this.className='mOut';" class="mOut">Link2</a><br>
<a href="test.html" onmouseover="this.className='mOver';" onmouseout="this.className='mOut';" class="mOut">Link3</a><br>
</body>
</html>