Solved

onMouseOver text rollover

Posted on 2000-03-23
68
1,177 Views
Last Modified: 2008-02-20
OK, I'm new to this so take it easy on me!

I have a web page with an insane amount of text links.  To bring a little bit of style to the page, I would like to create onMouseOver effects for the text links to either change their color or highlight them.  I have searched all over the web for something but am having a hard time finding a cross browser compatable script to do this.

Please help me by providing scripts for both options (change color or highlight the text link)

I am looking for something fairly short and will award points for the best comments which help me.
0
Comment
Question by:1cell
  • 29
  • 13
  • 6
  • +7
68 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 2650607
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2650610
... forgot to include the explaination:

http://www.dansteinman.com/dynduo/en/changingstyles.html
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2650622
0
 
LVL 6

Author Comment

by:1cell
ID: 2651185
I have seen this already and it does not help me.  Again, I am not a Javascript expert and I need to be spoonfed.  From what I can tell of these options, it requires a line for each link on a page.  This would be tedious to apply to my site which has many, many pages, all with different amounts of text links.

What I want, if possible, is a simple script to perform the action, whether it be highlighting the text or changing the text color, on ALL the links on a page.  I would like to try both.

I do appreciate the effort
0
 
LVL 6

Author Comment

by:1cell
ID: 2651238
to be a bit more clear

I want a script to change the color of a text link with OnMouseOver

I also want a script which highlights the text link with OnMouseOver

I want to compare these and be able to decide which I like best for my site.  I want the script to globally effect every link on a page and it must be compatable with both browsers.  I understand that this is not a basic request and I am willing to up the points if the solution deserves more rewards.
0
 
LVL 6

Author Comment

by:1cell
ID: 2651260
I have noticed that the links on this page only work in IE.  Am I asking for something impossible?
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2651383
To highlight the text, you have to use images. There is no way of highlighting the text in niehter IE nor NS.
To change the color of a link when you roll over it, you don't need a javascript, pure HTML and maybe a stylesheet command for some extra effect. That's all.
0
 
LVL 6

Author Comment

by:1cell
ID: 2651623
<getting frustrated>

k, gimme the scripts!

how would html work a change of text color when the mouse is over the link?

also, I did see script for highlighting text but can't remember which site.  I've been looking at sooooo many in the past few days.  That's why I'm here.  I thought this would be an easy one for somebody!

</getting frustrated>
0
 
LVL 9

Expert Comment

by:TTom
ID: 2651642
FWIW, I have seen a script (although I have not been able to track it down tonight) which will change the background color of text in a <span> or a <div>.  This should do what you want.  Since this involves using CSS, you can use the same method to change the font weight or style.

Don't give up.

Tom
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2651656
With this you can control all the appearances of the link, even change the pointer.
Just put it in your head-tag.

<STYLE TYPE="text/css"><!--
a{font-family:times;font-weight:bold;font-size:12px;color:000000;cursor:hand;text-decoration:none;}
A:link {font-family:times;font-weight:bold;font-size:12px;color:000000;cursor:hand;text-decoration:none;}
A:visited {font-family:times;font-weight:bold;font-size:12px;color:000000;cursor:hand;text-decoration:none;}  
A:active {font-family:times;font-weight:bold;font-size:12px;color:000000;cursor:hand;text-decoration:none;}    
a:hover{font-family:times;font-weight:bold;font-size:12px;color:000000;cursor:hand;text-decoration:underline;}

--></STYLE>

what you really only need is this:
<SCRIPT>
<!--
a:hover{color:000000;}
-->
</STYLE>

change 000000 to the HEX-value of the color you want.
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2651755
I have a script that changes the background color of a layer but that means you have to put a layer beneath all links.
It is NOT possible to change the backgrund of the text with CSS. You would have to changethe color of the layer beneath it.
0
 
LVL 6

Author Comment

by:1cell
ID: 2651774
1st script works in IE but makes NS view worse (it loses text formatting)

second errors out.

thanks though.  I really do appreciate the help.
0
 
LVL 3

Expert Comment

by:Hencah
ID: 2652098
try this

<span style="cursor:hand;color:ffffff;text-decoration=underline" onMouseOver="this.style.color=c0c0c0" onClick="location=www.url.com" onMouseOut="this.style.color=ffffff">My Link</span>
0
 
LVL 3

Expert Comment

by:Hencah
ID: 2652102
oops.. text-decoration=underline, should be text-decoration:underline
....or
<u><span style="cursor:hand;color:ffffff"
onMouseOver="this.style.color=c0c0c0" onClick="location=www.url.com" onMouseOut="this.style.color=ffffff">My Link</span></u>

0
 
LVL 6

Author Comment

by:1cell
ID: 2652194
Adjusted points from 100 to 150
0
 
LVL 6

Author Comment

by:1cell
ID: 2652195
doesn't return color or link in IE
doesn't show up in Netscape
didn't matter decoration=underline or decoration:underline
forgive me but am I supposed to keep the " this.style.color " or am I supposed to change it to something?  


sorry :-)

I'll up the points as this seems to be more difficult than I expected

Also, if possible, I want the underline to only show when the mouse is over the link when the color changes.

AND, is it not going to be possible to have one script in the head of the page which will do this or am I going to have to edit every link on this site?  Ughh, that would take quite some time.

Thanks all!
0
 
LVL 17

Expert Comment

by:inthe
ID: 2652586
hi,
please try this:

<HTML>
<HEAD>
<STYLE>

 .on  {
       font-size: 18;
         text-decoration: underline;
         color: red;      
        }
 .off {
        font-size: 10;
      text-decoration: none;
        color: black;        
        }

</STYLE>

<BODY STYLE = "font-family: Arial">
<H1>Some Random links </H1>
<UL>
  <LI> <A HREF = "http://www.av.com" CLASS = "off"
 onMouseOver = "this.className ='on';"
 onMouseOut = "this.className = 'off';">Search Altavista</A>
   
  <LI> <A
 HREF = "http://www.microsoft.com"
 CLASS = "off"
 onMouseOver = "this.className ='on';"
 onMouseOut = "this.className = 'off';">Microsoft </A>
   
  <LI> <A
 HREF = "http://www.experts-exchange.com"
 CLASS = "off"
 onMouseOver = "this.className ='on';"
 onMouseOut = "this.className = 'off';">Answers </A>
</UL>
</BODY>
</HTML>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2652773
inthe: 1cell needs crossbrowser scripts - yours is still IE only

1cell: Only IE will allow a whole page to have links that highlight with a single "script" in this case the stylesheet MHQ posted with a wrong start tag, I quote (after changing the script to style):

what you really only need is this:
<STYLE><!--
a:hover{color:000000;}
--></STYLE>

For any other solution, you will need at least one script and a call in every link's mouseover and mouseout. For netscape you will need to have every link in a LAYER
(<layer> or <div style="position:absolute">) and REWRITE the link on both mouseover and mouse out so kEk's answer is the correct one for an elegant solution that works in both browsers.

I hope I have clarified this enough for you to decide which of the above solutions you want to use.

Michel
0
 

Expert Comment

by:dunk4dyce
ID: 2653279
This works for me:

<HTML>
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function on(name)
      {
      document.all[name].style.color="#FF0000";
      }
function off(name)
      {
      document.all[name].style.color="#000000";
      }
//-->
</SCRIPT>
</head>
<BODY>
<a onmouseover="on('text1');" onmouseout="off('text1');"><p id="text1" style="color:black">hello</p></a>
</body>
</html>

This will only work in ie5
to make it work in Navigator I think that you use something like this

<HTML>
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function on(name)
      {
      eval("document.ids."+name+".color='#FF3300'");
      }
function off(name)
      {
      eval("document.ids."+name+".color='#000000'");
      }
//-->
</SCRIPT>
</head>
<BODY>
<a href="#" onmouseover="javascript:on('text1');" onmouseout="javascript:off('text1');"><p id="text1" style="color:black">hello</p></a>
</body>
</html>

But I dont have navigator. I KNOW its something very like this. Just change the code to detect if your using NN or IE.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2653511
dunk4dyce : Welcome to EE :-)

A few points for the future:

1. You suggestion is in principle the same as inthe's suggestion
2. it is IE only
3. The netscape suggestion does not work

You should comment on a question like this instead of answering unless you know for sure you are fully answering the question and not repeating already posted comments.

Michel
0
 

Expert Comment

by:dunk4dyce
ID: 2653656
sorry
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2653948
That is ok - we all started somwhere. If you wish you can change your answer to a comment.

Michel
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2654665
mplungjan: You are right, I guess my eyes didn't really see what I wrote. Mixed up script and style *ashamed*

To make the link underlined, just do like this instead:

<STYLE>
<!--
a:hover{color:000000;text-decoration:underline;}
-->
</STYLE>

This will only work in IE though.

As mplungjan states, you will need to set a div-tag for each link if you want it to work in NS and/if you want to change the color of the backgrund.
0
 
LVL 6

Author Comment

by:1cell
ID: 2655062
thanks dunk4dyce but I'd like to keep the question open.

now,

<STYLE><!--
                      a:hover{color:000000;}
                      --></STYLE>

worked for IE.
____________________

and as for,
"For any other solution, you will need at least one script and a call in every link's mouseover and mouseout. For netscape you will need to have every link in a LAYER (<layer> or <div style="position:absolute">) and REWRITE the link on both mouseover and mouse out so kEk's answer is the correct one for an elegant solution that works in both browsers. "
AND
"you will need to set a div-tag for each link if you want it to work in NS and/if you want to change the color of the backgrund."

I don't really have a problem with it as long as it's something I can replace through the entire site easily.
Obviously, adding a script in the head is easy.  My question is this:

Would I be able to use my editor to replace something automatically.  For instance if the line is:

<a href="0100.html" target="main">PAGE0100</a><br>

could I go to edit | replace <a href="0100.html" target="main"> with <whatever the line should be>
and replace all?

If I can, it would be a 1 minute fix for me to sub it all out  and I'm definately interested.  If I can't we're talking about hours of work and to be frank, The Netscape users can suffer.  Of course, I am one, so................


thanks
0
 
LVL 9

Expert Comment

by:TTom
ID: 2655399
I doubt you can do the S/R in one fell swoop, but you can probably do it in two.  I suspect the line will need to be something like:

<div class=linkdiv style="position:absolute><a href="">cbagqag</a></div>

In that case, you could do one pass to replace <a href=" with <div...<a href=" and a second pass to replace </a> with </a></div>

Should work, if you are careful.

Tom
0
 
LVL 6

Author Comment

by:1cell
ID: 2655527
that doesn't seem to do it in either browser unless I'm missing something

here's an example of the link

<a href="0101.html" target="main">Hardware Detective</a><br>

what i did was

<div class=linkdiv style="position:absolute><a href="0101.html" target="main">Hardware Detective</a></div><br>

the link did not work, just plain text appeared with no change when the mouse went over it.
where is the color to change to defined?
does something need to be in the head of the page?
0
 
LVL 3

Accepted Solution

by:
MHQ earned 100 total points
ID: 2655651
This should work fine in IE
<a href="#" onMouseover="this.style.color='00FFFF';this.style.backgroundColor='0000FF';" onMouseOut="this.style.color='000000';this.style.backgroundColor='FFFFFF';">Link</a>

just change the color-values to whatever you want them to be
0
 
LVL 6

Author Comment

by:1cell
ID: 2655853
Well, if it turns out too difficult to make things work with NS, I will use that and award you for it.  I like it and it would be easy to implement.  How could I make the text bold onMouseOver included in  the same script?

However, I am still waiting for responses to my questions from earlier today and I want to see what happens before doing anything.  I would really like something compatable with both browsers.

I do appreciate all the help and will award all who assisted me to a substantial degree.  I am really out of my scope on this and I appreciate everyone's patience.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2657165
Here is one from irt. All you need to change is the lines with dlink(....) and the colours used...
It does make you change the whole page tho... each link needs to go in a script tag:

Hi and welcome to my page, here is a link to
<script>
dLink('page2.html','my page two');
</script>


Michel

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript"><!--
var dhtml = '', no = 0;

function mover(object) {
   if (document.all) {
      eval(object + '.style.color = "orange"');
      eval(object + '.style.fontSize = "110%"');
   }
   else if (document.layers) {
      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 (document.all) {
      eval(object + '.style.color = "blue"');
      eval(object + '.style.fontSize = "100%"');
   }
   else if (document.layers) {
      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 (document.all) {
      document.write('<A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'</A>');
   }
   else if (document.layers) 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 = "orange";
classes.different.A.fontSize = "110%";
classes.normal.A.color = "blue";
//--></STYLE>

</HEAD>
<BODY>

<SCRIPT>
dLink('who.html','Dynamic Generic HTML');
dLink('what.html','Another Dynamic Generic HTML');
dLink('where.html','Yet Another');
dLink('when.htm','The Last');
</SCRIPT>

</BODY>
</HTML>
0
 
LVL 6

Author Comment

by:1cell
ID: 2657274
Adjusted points from 150 to 200
0
 
LVL 6

Author Comment

by:1cell
ID: 2657275
<confused>

OK, I'll try that! (as ideas shoot straight over my head)

let me understand.
in the head, I have to change to the proper colors
in the body, I will start with the <script> tag, then enter each line
for each line= dLink('pagename.html','descriptionorwhat????');
then end the body with the </script> tag

would this all be correct?
that would be a lot of work but what the heck

what is going to happen to other normal text and images as well as the html table formatting tags inside of this?  anything?

</confused>

I'm upping the points for the continued help from all
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2657340
In the head you have the script as is in the head of the example.

In the  body you would need a script each time you have a link now:

Hi and welcome to my page, here is a link
to <script> dLink('page2.html','my page two'); </script> but enough about me. Have a look at <script> dLink('http://www.netscape.com/','Netscape\'s'); </script> latest release of ....

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2657342
And you will need to change

 eval(object + '.style.color = "orange"');
 eval(object + '.style.fontSize = "110%"');

classes.different.A.color = "orange";
classes.different.A.fontSize = "110%";
classes.normal.A.color = "blue";

and

  eval(object + '.style.color = "blue"');
  eval(object + '.style.fontSize = "100%"');

to have the colours and size you wish.

Michel
0
 
LVL 6

Author Comment

by:1cell
ID: 2657440
OK, I'm in frames, how do I set the target?

also, before I get going on this, it IS cross platform right?

and in dLink('page2.html','my page two') what does 'my page two' signify?  is it simply a description?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 6

Author Comment

by:1cell
ID: 2657929
runtime error

<head>


                      <SCRIPT LANGUAGE="JavaScript"><!--
                      var dhtml = '', no = 0;

                      function mover(object) {
                         if (document.all) {
                            eval(object + '.style.color = "#00FFFF"');
                            eval(object + '.style.fontSize = "110%"');
                         }
                         else if (document.layers) {
                            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 (document.all) {
                            eval(object + '.style.color = "#404040"');
                            eval(object + '.style.fontSize = "100%"');
                         }
                         else if (document.layers) {
                            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 (document.all) {
                            document.write('<A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'</A>');
                         }
                         else if (document.layers) 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 = "#00FFFF";
                      classes.different.A.fontSize = "110%";
                      classes.normal.A.color = "#404040";
                      //--></STYLE>
</head>

<body>

<script> dLink('0101.html/','description');</script><br>

</body>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2660443
Are the document.writes on one line?

document.write('<A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'</A>');

and

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>');

are each on one long line

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2660466
Change

<A HREF

to

<A TARGET="whatever" HREF

in all cases.

The my page two is what will be shown to click on

Michel
0
 
LVL 9

Expert Comment

by:TTom
ID: 2660777
"AND, is it not going to be possible to have one script in the head of the page which will do this or am I going to have to edit every link on this site?  Ughh, that would take quite some time. "

It would seem that my "superiors" (Michel et al) are providing a thorough solution.  My initial attempt was only to indicate that your could do a search/replace over the contents of your file if you were careful about how it was done.  I did not intend to supply a code example for the entire change which needs to be made.

Sorry if I added to your confusion.

Tom
0
 
LVL 6

Author Comment

by:1cell
ID: 2662720
OK guys, sorry for not responding today.  My exchange server's been down (getting migrated, seems to equate huh?) and I haven't gotten email all day.  Give me some time to review and I'll post back soon.
0
 
LVL 6

Author Comment

by:1cell
ID: 2662748
OK, still runtime error.  exact script with all write lines on one line

<head>


<SCRIPT LANGUAGE="JavaScript"><!--
var dhtml = '', no = 0;

function mover(object) {
if (document.all) {
eval(object + '.style.color = "#00FFFF"');
eval(object + '.style.fontSize = "110%"');
}
else if (document.layers) {
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 (document.all) {
eval(object + '.style.color = "#404040"');
eval(object + '.style.fontSize = "100%"');
}
else if (document.layers) {
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 (document.all) {

***1line***   document.write('<A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'</A>');    
***/1line***
}

***1line***  else if (document.layers) 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>');  
***/1line***

***1line***
else document.write('<A HREF="'+href+'">'+text+'</A>');

***1line***
document.write('<BR>');  
***/1line***

no+=1;
}
//--></SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<script> dLink('0101.html/','description');</script><br>
</BODY>
</HTML>



a run time error has occured, do you wish to debug
line 45
expected '}'

a run time error has occured, do you wish to debug
line 49
object expected
0
 
LVL 6

Author Comment

by:1cell
ID: 2662760
I'll leave the target alone for now and look forward to your reponses.

If you guys want a good laugh, my work has decided that I would be a good candidate to code an intranet bolean search engine.

HA!

I asked, "how do you figure?  I can't even spell bolean!!!"

they say confidently, "you know html and java. visual should come pretty easy to you!"

</laughing inside>I'd love to!!!</laughing inside>

Me thinks I'll be needing some more points for this site!!!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2663230
You dropped a } before function mout(object) {

so

eval('document.layers["' + object + 'a"].visibility="show"');      
                   
}

function mout(object) {


should be

eval('document.layers["' + object + 'a"].visibility="show"');      
                   
}
}

function mout(object) {


0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2663233
TTOm: This took on a life of it's own!

Michel
0
 
LVL 9

Expert Comment

by:TTom
ID: 2664047
Absolutely!

That's one of the things I love about this site.  Every so often, a question "sprouts wings".

<G>

Tom
0
 
LVL 6

Author Comment

by:1cell
ID: 2667775
wow, sorry for the looooooooooooong delay in my response.  I've had trouble connecting to this site both at work on a T3 and at home on cable.  Am I the only one?  I think there might be a problem with my profile.  

Anyway, got past the run time errors etc. but it doesn't work in Netscape.  Am I missing something?

0
 
LVL 6

Author Comment

by:1cell
ID: 2671624
OK, found out the problem is with the site.  They had trouble migrating servers~!  I'm not the only one!!! woohoo!!!

I'm going to give this question a few more days and give up as it seems many, many sites have done including this one in regards to working with netscape.
0
 

Expert Comment

by:jakoba
ID: 2674948
Here's an working example of changing color and/or highlighting the link.
It's working fine in both Netscape (4.72) and Explorer (5.0).
Here's a link to a working the page (I'll explain some too :)
http://jakob.netsight.se/links.html

In IE, changing color/highlighting is easily done with a few lines of StyleSheets. Unfortunaly, it's not that easy in NS....
To get things to work, each link must be positioned absolutely with CSS, and some javascript must make the changes...
Here's the complete code...


<html>
 <head>
  <title>Highlight links</title>
  <script language="JavaScript">
   // this function is called with an onMouseOver-event in the linktag
   // "that" is a referense to the link, "styleId" is a string with the name of the style-id containing the link.
   function highLight( that, styleId ){

    // if the browser is IE, let it do the work with only CSS
    if( document.all ){
     return;
    }

    // each absolutely positioned element is a layer in Netscape, and since every layer is a "document inside a document", we need to find that "inner" document with the link    
    var linkDoc = eval( "document." + styleId + ".document" );

    // to change the link, create a string with a new link with the same values as the old link
    var theLink = "<a href=\"" + that.href + "\"";
    if( that.target ){
     theLink += " target=\"" + that.target + "\"";
    }

    // then add a CSS-class that defines how the link should look when the mouse is over it
    // also put an onMouseOut event in the link-tag to remove the highlighting when the mouse moves away from the link
    theLink += " class=\"highLighted\" onMouseOut=\"lowLight(this,'" + styleId + "')\">" + that.text + "</a>";

    // when the string is complete, write it to the "inner" document
    linkDoc.write( theLink );
    linkDoc.close();
   }
   
   // this function is called with an onMouseOut-event in the linktag
   // it works almost exactly like the highLight-function
   function lowLight( that, styleId ){
    if( document.all ){
     return;
    }
   
    var linkDoc = eval( "document." + styleId + ".document" );
    var theLink = "<a href=\"" + that.href + "\"";
    if( that.target ){
     theLink += " target=\"" + that.target + "\"";
    }

    // not putting the highlight-class in here since the link should no longer be highlighted
    theLink += " onMouseOver=\"highLight(this,'" + styleId + "')\">" + that.text + "</a>";
    linkDoc.write( theLink );
    linkDoc.close();
   }
  </script>
  <style type="text/css">
   a
    {
     font-weight: none;
     text-decoration: none;
    }
   a:hover
    {
     font-weight: bold;
     color: red;
     background-color: yellow;
    }
   #Link1
    {
     position: absolute;
     top: 10px;
     left: 10px;
    }
   #Link2
    {
     position: absolute;
     top: 30px;
     left: 10px;
    }
   #Link3
    {
     position: absolute;
     top: 50px;
     left: 10px;
    }
   #Link4
    {
     position: absolute;
     top: 70px;
     left: 10px;
    }
   .highLighted
    {
     font-weight: bold;
     color: red;
     background-color: yellow;
    }
  </style>
  <!-- The highLighted-CSS class is used to highlight a link -->
  <!-- The ID-Selectors ( #Link1 etc) are used to position each link -->
 </head>
 <body>
  <!-- Put each of the links in a positioned element, I like SPAN, but DIV should work just fine too -->
  <span id="Link1"><a href="http://www.netscape.com" onMouseOver="highLight(this,'Link1')">Netscape</a></span>
  <span id="Link2"><a href="http://www.yahoo.com" onMouseOver="highLight(this,'Link2')">Yahoo</a></span>
  <span id="Link3"><a href="http://www.netsight.se" onMouseOver="highLight(this,'Link3')">Netsight</a></span>
  <span id="Link4"><a href="http://www.bugsoft.hik.se/buyer/default.asp" onMouseOver="highLight(this,'Link4')">The Buyers Guide</a></span>
 </body>
</html>
0
 

Expert Comment

by:jakoba
ID: 2674960
Forgot to say one thing....
The only place you need to change to change color/highlight/change font-size/etc is in the highLighted-CSS class

I hope the code is readable.... even if my English could be better :-)
If there's anything that's fuzzy, just ask :-)
0
 
LVL 6

Author Comment

by:1cell
ID: 2675225
I can't accept this answer based on the fact that it's very similar to KnightEKnight's given in the beginning of this thread.

His answer was rejected based on the fact that it would require different scripts in the head of each page and with the number of links, would be very time consuming.

If I decide to use a script of this magnitude, I  would have to award him for the answer out of fairness.

So far, the easiest thing to implement has been MHQ's script which only works in IE but is very short and I can easily use my text editor to replace the original <A HREF statements with the new.

I realize what I am expecting may be impossible but I wait to see.  I am going to take another look at kEk's link to see exactly what it would take for me to sub in.  If I can use a macro to create the head, it might be worth a little time.

Thanks for your thorough input though.




kEk, if you are still here:

can I use hex for the colors in the lines
A.red {color:red;}
A.blue {color:blue;}

for an example:
A.over {color:000099;}
A.out {color:990000;}

?????

Anyone else still trying?
0
 

Expert Comment

by:jakoba
ID: 2675515
No problems :-)
You could always put the script in a file of it's own, and just include it in every page.... works in both netscape & explorer :-)
e.g.

<script language="JavaScript" src="theFunctions.js">
</script>
0
 

Expert Comment

by:jakoba
ID: 2675516
jakoba changed the proposed answer to a comment
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2675859
Did you ever get my script working in netscape ???

worked for me in NS 4.7 and I have not heard complaints elsewhere

Michel
0
 
LVL 6

Author Comment

by:1cell
ID: 2676268
jakoba, if I were to use one script source:
1st, does that mean each page would load faster or would it still have to read the source on every one?
2nd, since I have a variable amount of links on each page, could I just set up the script with the largest number and not have problems with them being unused on the other pages?

mplungian, I did not get that to work with NS 4.72

here's what I've used

<head>


<SCRIPT LANGUAGE="JavaScript"><!--
var dhtml = '', no = 0;

function mover(object) {
if (document.all) {
eval(object + '.style.color = "#00FFFF"');
eval(object + '.style.fontSize = "110%"');
}
else if (document.layers) {
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 (document.all) {
eval(object + '.style.color = "#404040"');
eval(object + '.style.fontSize = "100%"');
}
else if (document.layers) {
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 (document.all) {
 document.write('<A HREF="'+href+'" onMouseOut="mout(\'link'+no+'\')" onMouseOver="mover(\'link'+no+'\')" ID="link'+no+'">'+text+'</A>');    
}

  else if (document.layers) 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>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<script> dLink('0101.html/','description');</script><br>
</BODY>
</HTML>

0
 

Expert Comment

by:jakoba
ID: 2676804
1st: I'm not really sure about it, but I think that ones the script has been read in one page, the browser puts it in it's cache, and woun't have to read it all over again on another page -> the second page would load faster.

2nd: I'm not quite sure I understand the question...
You could use the script on any page, as long as each link it placed inside a positioned element (span, div etc).
You could put the CSS-rules (the #link1, and so on) in a separate file as well, and include that file (as well as the file with the javascript).
The only "problem" with this is that the positions are absolute, so the links would appear on the exact same position on each page (but that might not be a problem :)

If you put the javascript/css in separate files, the code would look like this:
  <script language="JavaScript" src="links.js"></script>
  <link rel="StyleSheet" type="text/css" href="links.css">

The links on the page (with onMouseOver etc) should look just like before.
Take a look at http://jakob.netsight.se/links2.html to see it in action :-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2676824
You forgot the styles!!!

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

Michel
0
 
LVL 6

Author Comment

by:1cell
ID: 2676892
Adjusted points from 200 to 250
0
 
LVL 6

Author Comment

by:1cell
ID: 2676893
jakoba, refering to:
<style type="text/css">
                         a
                          {
                           font-weight: none;
                           text-decoration: none;
                          }
                         a:hover
                          {
                           font-weight: bold;
                           color: red;
                           background-color: yellow;
                          }
                         #Link1
                          {
                           position: absolute;
                           top: 10px;
                           left: 10px;
                          }
                         #Link2
                          {
                           position: absolute;
                           top: 30px;
                           left: 10px;
                          }
                         #Link3
                          {
                           position: absolute;
                           top: 50px;
                           left: 10px;
                          }
                         #Link4
                          {
                           position: absolute;
                           top: 70px;
                           left: 10px;
                          }
                         .highLighted
                          {
                           font-weight: bold;
                           color: red;
                           background-color: yellow;
                          }
                        </style>
, lets say i have fifty links on one page, 25 on another, and 5 on a third.  Could the same script be used for all?

Also, could I use the same basic principal for any of the posted comments?

mplungian,
OK, got the general theory to work in Netscape but:

A) I don't necessarily like how the font size gets bigger.  I would like it to instead, just go bold.

B) How about changing the background color as well?

C) More importantly, the links in Netscape are misplaced, overlaying another paragraph.  I know there's some way to place them in a certain position but I'm not familiar with how AND we're really bordering the "not worth it, let the Netscape users including myself suffer" boundary

check out what I mean
 http://members.home.com/liquitech/example.html

or for the page itself
http://members.home.com/liquitech
please understand, work in progress
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2677574
As I mentioned, you will need to change that yourself.

You can perhaps guess that 110% is bigger and so not do that


Netscape: remove the 100% line

                      <STYLE TYPE="text/javascript"><!--
                      classes.different.A.color = "orange";
                      classes.normal.A.color = "blue";
                      //--></STYLE>

IE:


if (document.all) {
   eval(object + '.style.color = "orange"');
//   eval(object + '.style.fontSize = "110%"');  // commented out
}
..
..
..

if (document.all) {
   eval(object + '.style.color = "#404040"');
   // eval(object + '.style.fontSize = "100%"'); // commented out
}


For the rest, I agree, the links will be harder to place

Michel
0
 

Expert Comment

by:jakoba
ID: 2678106
Sure, you can use the same script for all pages.

You can use the same principal for any of the comments :-)
0
 
LVL 6

Author Comment

by:1cell
ID: 2713400
OK, sorry it has been sooooo long.  I have been busy with family problems and haven't had a minute to work on this.

here's the status:
mplungjan's and jakoba's scripts do the job but it would be way too much to implement. I cannot (will not) spend the time it takes to specify absolute locations for each link.  

At this point I am using MHQ's script for IE which is very small and nice, easy to implement on existing links and add to new ones.

so here's what I'll do unless someone has anything else to add.

I will delete this question to get my points back.  Then award

MHQ 100 points for providing what proved to be the best option.

Mplungian 75 points for helping so much and the effort in what seemed hopeless.

Jakoba and KnightEKnight 50 points each for offering valid solutions which would work if I only had the patience and time

I do appreciate all help and education. I will leave this question open until tomorroow at which point I will delete it in order to have points to post questions for each of you.
0
 
LVL 6

Author Comment

by:1cell
ID: 2724053
ok, can't delete it so I've asked CS to help out.  Hopefully, you guys should be rewarded soon and again thanks!
0
 
LVL 3

Expert Comment

by:darinw
ID: 2724605
Community Support has reduced points from 250 to 100
0
 
LVL 3

Expert Comment

by:darinw
ID: 2724606
Hello all,

I have reduced the points on this question to 100 as you indicated so that you can award MHQ here. Simply click on the Accept Comment as Answer button for one of MHQ's comments. Remember, the button is in the header of the comment.

To award the other Expert, create a new questions with a title of 'For ExpertName -- 10316384' using the unawarded Expert name and the original question number for each new question.

For your convenience, you can use this link to create the new questions. If you will right click on the link and choose 'Open in a new window' it should be very easy to create the new questions in this topic area:

http://www.experts-exchange.com/bin/NewQForm?ta=33


darinw
Customer Service
0
 
LVL 6

Author Comment

by:1cell
ID: 2724628
thanks darinw

0
 
LVL 6

Author Comment

by:1cell
ID: 2724631
thanks for the help
0
 
LVL 6

Author Comment

by:1cell
ID: 2724662
questions for each of you are posted.  just answer them for your points.  I really wish I had more to give because even though I couldn't get what I wanted, you guys helped me incredibly and it will help me more in the future.
0
 
LVL 3

Expert Comment

by:MHQ
ID: 2728372
Your solution with the points were brilliant. It shows that you put some thought into it. I bet all us experts appreciate that.
Take care!
/Mårten
0
 
LVL 6

Author Comment

by:1cell
ID: 2735141
Jakoba, there is a question for you in this category that I posted on the 17th.
If you are still here, answer it.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now