Jump to Real's How-to Main page

Change hyperlink text color

You can use the stylesheet if available.
<A HREF="../examples/blank.html" 
  onMouseOver="if (document.styleSheets) this.style.fontWeight='bold';"
  onMouseOut="if (document.styleSheets) this.style.fontWeight='normal';">
  Move over me!</A><BR>
Move over me!
NOTE : Works on IE4+

Here another solution proposed by David M. Larson (IE and Netscape)

<!-- Javascript/DHTML functions to implement links that
change color and size when the mouse moves over them.
This code works in both Netscape 4+ and IE 4+.
Debugged and modified by David M. Larson 07/26/2000  
dml@prontomail.com -->

<HTML>
<HEAD>
</HEAD>
<BODY>

<SCRIPT language="JavaScript"> <!--
var dhtml = 'NO', no = 0, enlarge_font = 1;
if (document.layers)
    dhtml = 'NN'; // Netscape 4+ feature detected
if (document.all) 
    dhtml = 'IE'; // IE 4+ feature detected


function mover(object) {
    if (dhtml == 'IE') {
        eval(object + '.style.color = "orange"');
        if (enlarge_font==1)
           eval(object + '.style.fontSize = "110%"');
        }
    else if (dhtml == 'NN') {
        eval('document.layers["' + object +
             'b"].moveBelow(document.layers["' + object + 'a"])');
        eval('document.layers["' + object + 'b"].visibility="hide"');
        eval('document.layers["' + object + 'a"].visibility="show"');
        }
    }

function mout(object) {
    if (dhtml == 'IE') {
        eval(object + '.style.color = "blue"');
        eval(object + '.style.fontSize = "100%"');
        }
    else if (dhtml == 'NN') {
        eval('document.layers["' + object +
            'a"].moveBelow(document.layers["' + object + 'b"])');
        eval('document.layers["' + object + 'a"].visibility="hide"');
        eval('document.layers["' + object + 'b"].visibility="show"');
        }
   }

function dLink(href,text) {
    if (dhtml == 'IE') {
        document.write('<A HREF="'+href);
        document.write('" onMouseOut="mout(\'link'+no);
        document.write('\')" onMouseOver="mover(\'link');
        document.write(no+'\')" ID="link'+no+'">'+text);
        document.write('<\/A>');
        }
    else if (dhtml == 'NN') {
        document.write('<LAYER NAME="link'+no);
        document.write('a" VISIBILITY="hide"><A HREF="');
        document.write(href);
        document.write('" onMouseOut="mout(\'link'+no);
        document.write('\')" CLASS="different">'+text);
        document.write('<\/A><\/LAYER><LAYER NAME="link');
        document.write(no+'b"><A HREF="'+href);
        document.write('" onMouseOver="mover(\'link'+no);
        document.write('\')" CLASS="normal">'+text);
        document.write('<\/A><\/LAYER>');
        }
    else {
        document.write('<A HREF="'+href);
        document.write('">'+text+'<\/A>');
        }
     no+=1;
   }

//-->
</SCRIPT>

<STYLE TYPE="text/javascript"><!--
    classes.different.A.color = "orange";
    if (enlarge_font == 1)
       classes.different.A.fontSize = "110%";
    classes.normal.A.color = "blue";
//--></STYLE>
<SCRIPT>
dLink('who.html','Dynamic Generic HTML');
document.write('<BR>');
dLink('what.html','Another Dynamic Generic HTML');
document.write('<BR>');
dLink('where.html','Yet Another');
document.write('<BR>');
dLink('when.htm','The Last');
document.write('<BR>');
document.write('<BR>');
</SCRIPT>
</BODY>
</HTML>
Try it here.
If you find this article useful, consider making a small donation
to show your supportfor this Web site and its content.

Written and compiled by Réal Gagnon ©1998-2005
[ home ]