Solved

text changes color when you mouseover a link

Posted on 2001-06-12
5
174 Views
Last Modified: 2010-04-09
What is the code for changing the color of a link when you mouseover? Thanks.
Irwin
0
Comment
Question by:Irwin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6181731
<html>
<head>
<style>
a { font-family: arial; color:#ffffff; }
a:hover { color: #ff0000; }
</style>
</head>
<body>
<a href="whatever.html">Look..it changes color...but unfortunately only in IE...</a>
</body>
</html>

Cheers,
Max.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6181896
IE and Opera only.

A workaround for Netscape can be found:

http://teaink.com/netscapehover.htm

:o)

Ant
0
 
LVL 9

Expert Comment

by:nimaig
ID: 6181908
A:HOVER{color: #FFFF00}

works only with IE

Check this site
     http://www.siteexperts.com/tips/styles/ts31/page2.asp
this gives you example of getting HOVER effect in both IE and Netscape. Try modifing the code to meet
your requirement.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
ID: 6182411
This is the basic code for cross-browser mouseover:

<HTML>
<HEAD>
<TITLE> </TITLE>
<style>
   .colorA {color:red;}
   .colorB {color:blue; text-decoration:none;}
   .colorC {color:lime;}
</style>
<SCRIPT>
<!--

   function RollOver (Ltext,lyr,lnk,oldcls,newcls,over)
   {
      var NS=(document.layers) ? true : false;
      var HiLev=(document.getElementById) ? true : false;
      var IE=(document.all) ? true : false;
      var str="<A CLASS='" + newcls + "' HREF='" + lnk + "'";
      if (over)
      {
         str += " onMouseOut=\"RollOver(\'";
      }
      else
      {
         str+= " onMouseOver=\"RollOver(\'";
      }        
      str += Ltext + "\', \'" + lyr + "\',\'" + lnk + "\', \'";
      str += newcls + "\', \'" + oldcls;
      if (over)
      {
         str += "\', false)\">" + Ltext + "</A>";
      }
      else
      {
         str += "\', true)\">" + Ltext + "</A>";
      }
      if (NS)
      {
         with (document.layers[lyr].document)
         {
            open();
            write(str);
            close();
         }
      }
      else
      {
         if (HiLev)
         {
            document.getElementById(lyr).innerHTML=str;
         }
         else
         {
            if (IE)
            {
            document.all[lyr].innerHTML=str;
            }
         }
      }
   }
//-->
</SCRIPT>
</head>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
      LINK="#0000FF" VLINK="#800080">
<SPAN ID="div1id" STYLE="position:absolute">
<A CLASS="colorB"
HREF="www.blah1.com"
onMouseOver="RollOver('go to blah','div1id',this.href,'colorB','colorC',true)">
go to blah
</A>
</SPAN>
<BR><BR>
<SPAN ID="div2id" STYLE="position:absolute">
<A CLASS="colorB"
HREF="www.blah2.com"
onMouseOver="RollOver('go to blahblah','div2id',this.href,'colorB','colorA',true)">
go to blahblah
</A>
</SPAN>
<BR><BR>
<SPAN ID="div3id" STYLE="position:absolute">
<A CLASS="colorB"
HREF="www.blah1.com"
onMouseOver="RollOver('NOT here','div3id',this.href,'colorB','colorA',true)">
NOT here
</A>
</SPAN>
<BR><BR>
</BODY>
</HTML>

Note that we have to re-write the code for all because of Netscape 4
even though IE can handle it with styles.  Netscape 4 forces us to
degrade the IE  and NS 6 support for CSS.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6185594
Glad I could help.  Thanks for the A.:^)

Cd&
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question