I am trying to make the links in my site change color when you put your mouse over them. It is a work in progress but it should work. I don;t now why its not so i need some help. heres the code for the whole page:
Code:
<html>
<head>
<title>Wesley Hutchison</title>
<style>
table{
margin-left:25%;
margin-right:25%;
margin-top:50px;
}
.greyback_text{
color:white;
}
a{
text-decoration:none;
}
</style>
<script>
var a_num;
over(a_num) {
switch(a_num) {
case "a_1":
document.getElementById("a_1").setAttribute("style","color:lime;")
case "a_2":
document.getElementById("a_2").setAttribute("style","color:lime;")
case "a_3":
document.getElementById("a_3").setAttribute("style","color:lime;")
case "a_4":
document.getElementById("a_4").setAttribute("style","color:lime;")
case "a_5":
document.getElementById("a_5").setAttribute("style","color:lime;")
break;
default:
document.getElementById("a_5").setAttribute("style","color:brown;")
document.getElementById("a_5").setAttribute("style","color:brown;")
document.getElementById("a_5").setAttribute("style","color:brown;")
document.getElementById("a_5").setAttribute("style","color:brown;")
document.getElementById("a_5").setAttribute("style","color:brown;")
}
}
</script>
</head>
<body bgcolor="black">
<table border="1" bgcolor="green">
<tr>
<td colspan="2">
<h1><p align="center">Wesley Hutchison</p></h1>
</td>
</tr>
<tr>
<td>
<h2><p align="center"><i>Welcome to my site!</i></p></h2>
<p align="center"><i><b>Hi. I'm Wes,</b></i> and I have a variety of interests. I like <u>music</u>, and I play the <u>piano</u>, <br />
<u>tenor sax</u>, and <u>ukulele</u>. I want to be a <u>professor</u> in <u>genetics</u> at some sort of college when <br />
I am older. I also take interest in <u>physics</u> and <u>cosmology</u>, but am not entirely dedicated to it. <br />
If you want to learn more about me then just see the <i>About Me</i> page. <br />
</p>
</td>
<td bgcolor="grey">
<h3><p align="left" class="greyback_text">Navigation</p></h3>
<ul align="left">
<li><a href="index.html" id="a_1" onMouseOver="over('a_1')" onMouseOut="out('a_1')" style="color:brown;"><p>Home</p></a></li>
<li><a href="about.html" id="a_2" onMouseOver="over('a_2')" onMouseOut="out('a_2')" style="color:brown;"><p>About Me</p></a></li>
<li><a href="music.html" id="a_3" onMouseOver="over('a_3')" onMouseOut="out('a_3')" style="color:brown;"><p>Music</p></a></li>
<li><a href="gene.html" id="a_4" onMouseOver="over('a_4')" onMouseOut="out('a_4')" style="color:brown;"><p>Genetics</p></a></li>
<li><a href="phys.html" id="a_5" onMouseOver="over('a_5')" onMouseOut="out('a_5')" style="color:brown;"><p>Physics/Cosmology</p></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Do you use javascript only for hover? This is pure CSS
HTML Code:
<html><head><title>Wesley Hutchison</title><style>
table{
margin-left:25%;
margin-right:25%;
margin-top:50px;
}
.greyback_text{
color:white;
}
a{
text-decoration:none;
color:brown;
}
a:hover{
color:lime;
}
</style></head><body bgcolor="black"><table border="1" bgcolor="green"><tr><td colspan="2"><h1><p align="center">Wesley Hutchison</p></h1></td></tr><tr><td><h2><p align="center"><i>Welcome to my site!</i></p></h2><p align="center"><i><b>Hi. I'm Wes,</b></i> and I have a variety of interests. I like <u>music</u>, and I play the <u>piano</u>, <br /><u>tenor sax</u>, and <u>ukulele</u>. I want to be a <u>professor</u> in <u>genetics</u> at some sort of college when <br />
I am older. I also take interest in <u>physics</u> and <u>cosmology</u>, but am not entirely dedicated to it. <br />
If you want to learn more about me then just see the <i>About Me</i> page. <br /></p></td><td bgcolor="grey"><h3><p align="left" class="greyback_text">Navigation</p></h3><ul align="left"><li><a href="index.html"><p>Home</p></a></li><li><a href="about.html"><p>About Me</p></a></li><li><a href="music.html"><p>Music</p></a></li><li><a href="gene.html"><p>Genetics</p></a></li><li><a href="phys.html"><p>Physics/Cosmology</p></a></li></ul></td></tr></table></body></html>
you should use a:hover in css. if you insist on javascript...
HTML Code:
<html><head><title>Wesley Hutchison</title><style type="text/css">
table{
margin-left:25%;
margin-right:25%;
margin-top:50px;
}
.greyback_text{
color:white;
}
a{
text-decoration:none;
}
</style><script type="text/javascript">
function over(a_num) {
a_num.style.color = "#lime";
}
function out(a_num) {
a_num.style.color = "#brown";
}
</script></head><body bgcolor="black"><table border="1" bgcolor="green"><tr><td colspan="2"><h1><p align="center">Wesley Hutchison</p></h1></td></tr><tr><td><h2><p align="center"><i>Welcome to my site!</i></p></h2><p align="center"><i><b>Hi. I'm Wes,</b></i> and I have a variety of interests. I like <u>music</u>, and I play the <u>piano</u>, <br /><u>tenor sax</u>, and <u>ukulele</u>. I want to be a <u>professor</u> in <u>genetics</u> at some sort of college when <br />
I am older. I also take interest in <u>physics</u> and <u>cosmology</u>, but am not entirely dedicated to it. <br />
If you want to learn more about me then just see the <i>About Me</i> page. <br /></p></td><td bgcolor="grey"><h3><p align="left" class="greyback_text">Navigation</p></h3><ul align="left"><li><a href="index.html" id="a_1" onMouseOver="over(this)" onMouseOut="out(this)" style="color:brown;"><p>Home</p></a></li><li><a href="about.html" id="a_2" onMouseOver="over(this)" onMouseOut="out(this)" style="color:brown;"><p>About Me</p></a></li><li><a href="music.html" id="a_3" onMouseOver="over(this)" onMouseOut="out(this)" style="color:brown;"><p>Music</p></a></li><li><a href="gene.html" id="a_4" onMouseOver="over(this)" onMouseOut="out(this)" style="color:brown;"><p>Genetics</p></a></li><li><a href="phys.html" id="a_5" onMouseOver="over(this)" onMouseOut="out(this)" style="color:brown;"><p>Physics/Cosmology</p></a></li></ul></td></tr></table></body></html>
Mouseover text color chang help plz!
Reply With Quote
Bookmarks