Link to home
Start Free TrialLog in
Avatar of jlanimator
jlanimator

asked on

help me!!! I'm desperate!!!!

How do I turn text different colors for rollovers without using graphic images?

Thanks,
Hungry Fish.
ASKER CERTIFIED SOLUTION
Avatar of mbeaven
mbeaven
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jlanimator
jlanimator

ASKER

Thank You SOOOOOOOO much!!!!!!! You were EXTREMELY HELPFUL!!!!!!!!!!!!! WAHOOOOOO!!!!!
Avatar of mbeaven
mbeaven
Flag of United States of America image
What are ya, a freak?
Avatar of rdivilbiss
rdivilbiss
Flag of United States of America image
You can do this with CSS, except NS does not use the hover attribute which means it will not display the effect.  The following bit of code will work for both IE and NS.

If you do not want the text to be a link, use a href="#".  Note: You just copy and paste the code into the head.  Everyplace you want the rollover text in your page body you call the function
thus:

<script>dLink('#','Rollover Text Here');</script>




<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript"><!--
var dhtml = '', no = 0;
if (navigator.appVersion.charAt(0) == "4") {
    if (navigator.appVersion.indexOf("MSIE") != -1)
        dhtml = 'IE';
    else
        dhtml = 'NN';
}      

function mover(object) {
    if (dhtml == 'IE') {
        eval(object + '.style.color = "red"');
        eval(object + '.style.fontSize = "100%"');
    }
    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+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'<\/A>');
    else if (dhtml == 'NN')
        document.write('<LAYER NAME="link'+no+'a" VISIBILITY="hide"><A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" CLASS="different">'+text+'<\/A><\/LAYER><LAYER NAME="link'+no+'b"><A HREF="'+href+'" onMouseOver="mover(\'link'+no+'\')" CLASS="normal">'+text+'<\/A><\/LAYER>');
    else
        document.write('<A HREF="'+href+'">'+text+'<\/A>');
    document.write('<BR>');
    no+=1;
}
//--></SCRIPT>

<STYLE TYPE="text/javascript"><!--
    classes.different.A.color = "red";
    classes.different.A.fontSize = "100%";
    classes.normal.A.color = "blue";
//--></STYLE>

<title>Cross-Browser Hover Text Link</title>

</HEAD>
<BODY>
<script>dLink('default.htm','A Cross Browser Hover Link in Javascript');</script>


</BODY>

Cheers,
Rod


Some live examples of other methods can be found here:

http://www.cssnetworks.com/test/mouse_over.htm

Avatar of jlanimator
jlanimator

ASKER

WHATEVER MBEAVEN!!!!!!