Javascript Change Link Text Color onmouseover

by top54u.com 30 Jun, 2008

Inside DHTML Tutorials | DOM Tutorials | HTML Tutorials | JavaScript Tutorials

Javascript Code to Change Text Color of HTML elements

HTML change link color using CSS style

Javascript Code to Change Div Object innerHTML

HTML Code to Change Heading Font Size and Color

Javascript Code to Change Span innerText

Javascript Change Background Color Style

HTML Div Tag Overflow CSS Style Scrollbars

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.

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

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

    <title>Javascript Change Link 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">
    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 /><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>

Spotlight.....

Be the first to rate this post