• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1218
  • Last Modified:

onMouseOver text rollover

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
1cell
Asked:
1cell
  • 29
  • 13
  • 6
  • +7
1 Solution
 
knightEknightCommented:
0
 
knightEknightCommented:
... forgot to include the explaination:

http://www.dansteinman.com/dynduo/en/changingstyles.html
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
I have noticed that the links on this page only work in IE.  Am I asking for something impossible?
0
 
MHQCommented:
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
 
1cellAuthor Commented:
<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
 
TTomCommented:
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
 
MHQCommented:
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
 
MHQCommented:
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
 
1cellAuthor Commented:
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
 
HencahCommented:
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
 
HencahCommented:
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
 
1cellAuthor Commented:
Adjusted points from 100 to 150
0
 
1cellAuthor Commented:
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
 
intheCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
dunk4dyceCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
dunk4dyceCommented:
sorry
0
 
Michel PlungjanIT ExpertCommented:
That is ok - we all started somwhere. If you wish you can change your answer to a comment.

Michel
0
 
MHQCommented:
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
 
1cellAuthor Commented:
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
 
TTomCommented:
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
 
1cellAuthor Commented:
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
 
MHQCommented:
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
 
1cellAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
1cellAuthor Commented:
Adjusted points from 150 to 200
0
 
1cellAuthor Commented:
<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
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
TTomCommented:
"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
 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
TTOm: This took on a life of it's own!

Michel
0
 
TTomCommented:
Absolutely!

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

<G>

Tom
0
 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
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
 
jakobaCommented:
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
 
jakobaCommented:
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
 
1cellAuthor Commented:
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
 
jakobaCommented:
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
 
jakobaCommented:
jakoba changed the proposed answer to a comment
0
 
Michel PlungjanIT ExpertCommented:
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
 
1cellAuthor Commented:
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
 
jakobaCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
1cellAuthor Commented:
Adjusted points from 200 to 250
0
 
1cellAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
jakobaCommented:
Sure, you can use the same script for all pages.

You can use the same principal for any of the comments :-)
0
 
1cellAuthor Commented:
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
 
1cellAuthor Commented:
ok, can't delete it so I've asked CS to help out.  Hopefully, you guys should be rewarded soon and again thanks!
0
 
darinwCommented:
Community Support has reduced points from 250 to 100
0
 
darinwCommented:
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
 
1cellAuthor Commented:
thanks darinw

0
 
1cellAuthor Commented:
thanks for the help
0
 
1cellAuthor Commented:
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
 
MHQCommented:
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
 
1cellAuthor Commented:
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 29
  • 13
  • 6
  • +7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now