PDA

View Full Version : Colour changer



louisaivy
10-19-2011, 04:41 AM
Hi i am wanting to do a simple colour change of the text with the Onmouseover function, i want to use javascript as i know i can do it with css but want to learn how to do it with javascript. Im really new to coding so how would i go about this?
I have a menu bar with 6 links, i want 3 of the links to change 1 colour when they are moused over and 3 with a different colour. Any help would be appreciated..

keyboard
10-19-2011, 05:36 AM
This should work


<a href="http://www.google.com/" style="color: blue; " onmouseover="this.style.color='red'"> TEXT </a>


Or if you want it to change back onmouseout


<a href="http://www.google.com/" style="color: blue; " onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">TEXT</a>

louisaivy
10-19-2011, 11:47 PM
If i wanted to do the javascript in an external script sheet would i have to add anything else?

keyboard
10-20-2011, 02:34 AM
<html>
<head>
<script src="javascript2.js">
</script>
</head>
<body>


<a href="http://www.google.com/" style="color: blue; " onmouseover="color()" onmouseout="color2()" id="colorfull"> TEXT </a>

</body>
</html>



javascript2.js



function color(){
document.getElementById('color').style.color='red';
}

function color(){
document.getElementById('color').style.color='blue';
}



For some reason I couldn't get it to work. I did some reasearch and apparently
document.getElementById('color').style.color='color'; won't work in internet explorer. I'm not sure what you could do to make it work though. Does anyone have any suggestions as to what you could do instead?

vwphillips
10-22-2011, 03:14 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function color(obj,col){
obj=typeof(obj)=='object'?obj:document.getElementById(obj);
if(obj&&typeof(col)=='string'){
obj.style.color=col;
}
}
/*]]>*/
</script></head>

<body>
<a href="http://www.google.com/" style="color: blue; " onmouseover="color(this,'red')" onmouseout="color('colorfull','blue')" id="colorfull"> TEXT </a>

</body>

</html>