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

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

Thanks,
Hungry Fish.
jlanimatorAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
mbeavenConnect With a Mentor Commented:
In the head of your document
<STYLE type="text/css">
<!--
A:hover {color: blue}
-->
</STYLE>

Only works in IE
0
 
jlanimatorAuthor Commented:
Thank You SOOOOOOOO much!!!!!!! You were EXTREMELY HELPFUL!!!!!!!!!!!!! WAHOOOOOO!!!!!
0
 
mbeavenCommented:
What are ya, a freak?
0
 
rdivilbissCommented:
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

0
 
jlanimatorAuthor Commented:
WHATEVER MBEAVEN!!!!!!
0
All Courses

From novice to tech pro — start learning today.