Results 1 to 5 of 5

Thread: Colour changer

  1. #1
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Colour changer

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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,924
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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>

  3. #3
    Join Date
    Oct 2011
    Posts
    22
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    If i wanted to do the javascript in an external script sheet would i have to add anything else?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,924
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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?
    Last edited by keyboard; 10-20-2011 at 04:11 AM.

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •