Javascript Change Link Text Color onmouseover

Updated on 23 Mar 2012,
Published on 30 Jun 2008

Javascript DOM provides the functionality to change the Link text color using onmouseover event dynamically. You can use the document. getElementById method in a javascript function to access the specified Hyperlink anchor <a> tag of HTML and change the color of text by calling the javascript function on its onmouseover event. Use the value of id attribute of anchor <a> link HTML tag to pass it to the getElementById method. Javascript document object provides the getElementById method that provides the style object having all the CSS style properties such as color, backgroundColor etc.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Syntax of Javascript to Change Link Text color onmouseover

document.getElementById("id").style.color = "value";

You can pass the value as color name or #RRGGBB hex code value for color to the above code for changing the style color of text. Above code allows you to get or set the font color of the HTML element whose id is passed to the getElementById method of document object.

You can use the onmouseover event to change the link text color and onmouseout event to change back the color of link text to its initial default color.

Javascript this object can also be used to access the CSS style properties through style object. Syntax example:

this. style. color = "value";

this object of javascript is used inline in the HTML tag code so that this object could get the reference to the HTML tag in which it is being used.

Example of Javascript Change Link Text Color onmouseover

<html>
<head>
    <title>Javascript Change Hyperlink Text Color Onmouseover</title>
    <style type="text/css">
        a {
            font-weight: bold;
            font-family: verdana;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript" language="javascript">
    <![CDATA[
        function changeColor(idObj, colorObj) {
            document.getElementById(idObj.id).style.color = colorObj;
        }
    ]]>
    </script>
</head>
<body>
    <a href="#" 
            style="color: #000000" 
            onmouseover="this.style.color='#FF0000'" 
            onmouseout="this.style.color='#000000'">
            Link 1
    </a>
    <br />
    <br />
    <a href="#" 
            style="color: #999999" 
            onmouseover="this.style.color='#008000'" 
            onmouseout="this.style.color='#999999'">
            Link 2
    </a>
    <br />
    <br />
    <a href="#" 
            style="color: #FF0000" 
            onmouseover="this.style.color='blue'" 
            onmouseout="this.style.color='#FF0000'">
            Link 3
    </a>
    <br />
    <br />
    <a id="lnk1" 
            href="#" 
            style="color: #008000" 
            onmouseover="changeColor(this,'#FF0000');"
            onmouseout="changeColor(this,'#008000');">
            Link Color change using javascript function
    </a>
</body>
</html>

Output:

You can see the output of above discussed codes from the following link:

Change Hyperlink Text Color Onmouseover

Continue to next tutorial: Changing Previous Next Background-image Using Javascript to learn how to change the image by clicking hyperlinks.

1 Responses to "Javascript Change Link Text Color onmouseover"
Anders
Thank you
With this event its better to do because the css doesnt work all the time with different browsers.
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email