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

HTML Code:

<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

HTML Code:

<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 Code:

<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

HTML Code:

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

Code:

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

Code:

<!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>

Thread: Colour changer

Thread Tools

Search Thread

Colour changer

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions