Javascript For Text Color Swap

nachtgeist03

Apr 21 2005, 07:43 AM

Just looking for how I can make a text link change color onmouseover and onmouseout, similar to an image swap. Any help on this would be appreciated.

Thanks!

Comment/Reply (w/o sign-up)

miCRoSCoPiC^eaRthLinG

Apr 21 2005, 08:32 AM

The process is extremely simple and can be attained with just one line of code. You've to etiher define a SPAN or a DIV that will respond to the mouse events.

CODE

<SPAN id="span1">
<a onmouseover="this.style.color='#FF7B1F'" onMouseOut="this.style.color='#000000'">Astahost Rulezz</a>
</SPAN>

As you can see from the code, it changes the color attributes of that SPAN using, this.style.color command and an appropriate color code.

That'll all you need - tweak around with the color code setting to get your desired result. You can even change the background color of the text, to give it a hovering menu selection bar like effect.

Comment/Reply (w/o sign-up)

signatureimage

Apr 21 2005, 08:42 AM

Dear nachtgeist03,

Because you talked about "text link",
I suppose that you mean a HTML <A > </A> tag.

In that case, it is easy, even without the help of JavaScript.

I propose to use CSS.

Here is an example:

(1)
First we will declare a style-sheet definition.
This can be done in a separate file,
or it can be done in-line, in the HTML.
Let's do it in-line.
In the <HEAD> </HEAD> section we write something
like the following:

CODE

<HEAD>
<STYLE>
a{color:#009;background-color:#cfc;text-decoration:none;}
a:hover{color:#009;background-color:#fcc;text-decoration:none;}
</STYLE>
</HEAD>

(2)
Then we can write the <A> </A> tag.

CODE

<A HREF="some-link-to-some-URL">text-to-be-highlighted</A>

What is the effect?
The "color:#009;" definition will show the "text-to-be-highlighted" in dark-blue.
The "background-color:#cfc;" definition will show the "text-to-be-highlighted" on a pale green background.
The "text-decoration:none;" definition will remove the underlining from the "text-to-be-highlighted".

When the surfers moves the mouse over the "text-to-be-highlighted",
then the CSS definition "a:hover" is activated by the browser,
and the net effect is that the "background-color:#fcc" definition
will show the "text-to-be-highlighted" on a pale red background.

I hope this answers your question.

If I misread your question, and you did mean "some text links but not all text links on the page",
then the use of CSS can be activated with the use of CLASS attributes.

If I misread your question, and you did not mean "text link" to be a HTML <A> </A> tag,
then the use of CSS can be activated on other HTML elements with the use of JavaScript.

Greetings,
John

Comment/Reply (w/o sign-up)

nachtgeist03

Apr 21 2005, 09:15 AM

John, you almost hit it square on the head. I'm only looking to change the text color on a few links (text nav bar), and it is through just plain 'ole <a> </a> tags.

I know there's also a way to have one css script, and have every page call back to that script for direction. It would be nice to be able to change the hover color on all the pages with that text nav bar w/o having to independantly re-code each css. A bit of insight as to how to accomplish that would be welcomed.

And on another side note, you put in "background-color" ~ obviously if I wanted to not have that, just don't put that in, right?

And m^e ~ thanks for the input as always; always welcomed

Thanks guys (and gals if appropriate)

Comment/Reply (w/o sign-up)

signatureimage

Apr 21 2005, 10:04 AM

Dear nachtgeist03,

In order to limit the CSS effects to the HTML <A> </A> tags of
the text navigation bar only, we have to combine the style-definitions
with a CLASS.

Let's elaborate the example:

(1)
First, in the CSS definitions we will choose a name for our class,
most obvious would be: myNav

CODE

<HEAD>
<STYLE>
a.myNav {color:#009;background-color:#cfc;text-decoration:none;}
a.myNav:hover {color:#009;background-color:#fcc;text-decoration:none;}
</STYLE>
</HEAD>

(2)
Then, in the HTML, we will choose the same class name in the
text nav bar <A> </A>, and not in the other <A> </A>.

CODE

<A CLASS="myNav" HREF="some-link-to-some-URL1">text1-to-be-highlighted</A><BR />
<A CLASS="myNav" HREF="some-link-to-some-URL2">text2-to-be-highlighted</A><BR />
<A CLASS="myNav" HREF="some-link-to-some-URL3">text3-to-be-highlighted</A>

The effects that were described in my previous post
will now be applied only to the <A> </A> of the text nav bar.

Concerning your new question, about using the same CSS in all
your pages, without having to specify the <STYLE> </STYLE> in
each and every page, that is easy too.

(1)
First we make a new text file, name it something like "mycss.css"
and place it in some convenient place on our web-structure.
Then we place the CSS definitions inside this file:

CODE

a.myNav {color:#009;background-color:#cfc;text-decoration:none;}
a.myNav:hover {color:#009;background-color:#fcc;text-decoration:none;}

Only the definitions, no <STYLE> </STYLE> tags !

(2)
Then, in every HTML file we place a reference to this file:

CODE

Comment/Reply (w/o sign-up)

signatureimage

Apr 21 2005, 11:00 AM

And now for something completely cool !

When I read your post correctly, nachgeist03, you have a text nav bar.

Most - if not all - web-sites have some form of navigation.

But when I make a print of a web-page, what use have I
of the navigation information on my printed copy? None!

So, why don't we - as web-designers - remove the navigation
from the printed version of our web-pages?

Can that be accomplished? Yes of course, and here is how:

(1)
Elaborating on my previous post, we will modify the HTML that calls our common CSS file:

original=

CODE

new=

CODE

Did you see the new tag?

This indicates that the contents of the mycss.css must be applied by the browser, only when the browser is rendering the HTML for a screen.

(2)
Now we will create a new text file, name it something like "myprintcss.css"
and place it in some convenient place on our web-structure.
Then we place some new CSS definitions inside this file:

CODE

myNav {display:none;}

(3)
Again we modify the HTML that calls our common CSS file:

original=

CODE

new=

CODE

Did you see the new "print" tag?

This indicates that the contents of the myprintcss.css must be applied by the browser, only when the browser is rendering the HTML for a printer.

What will be the effect?
Well, the "display:none;" definition will inhibit the rendering of our navigation on the printed copy of our web-pages.

And what happens when our navigation not only contains <A> </A> tags, like in our example, but also some static text?
Well we surround that static text with <SPAN> </SPAN> tags that contain a call to our myNav CLASS, and the printed copy will not show that static text.

CODE

<SPAN CLASS="myNav">Navigation menu:</SPAN><BR />
<A CLASS="myNav" HREF="some-link-to-some-URL1">text1-to-be-highlighted</A><BR />
<A CLASS="myNav" HREF="some-link-to-some-URL2">text2-to-be-highlighted</A><BR />
<A CLASS="myNav" HREF="some-link-to-some-URL3">text3-to-be-highlighted</A>

Cool or what?

Comment/Reply (w/o sign-up)

nachtgeist03

Apr 21 2005, 03:44 PM

*bows* you are the man

Thanks a ton, I'll try to get this all implemented tonight after work. I'd start now but I doubt I'd be able to keep tryack of my time

Comment/Reply (w/o sign-up)

nachtgeist03

Apr 29 2005, 09:25 PM

Ok, different question now. Decided to redo my design again (dang I can't make my mind up

), and I was wondering how you can make a text nav bar where a table cell would change color on mouseover instead of just the bg of the text it's self. Here's an example of what I'm looking to do ~ imagine the entire box being the cell:

Comment/Reply (w/o sign-up)

vujsa

Apr 29 2005, 10:53 PM

Try this:

CODE

Hope this helps.

vujsa

This can also work for the entire row if applied to the <tr> tag instead of <td> tag.

Comment/Reply (w/o sign-up)

nachtgeist03

Apr 30 2005, 12:22 AM

well, let me post an example.

www.htmlgoodies.com has the style of text nav bar I'm looking for (with alternate colors of course).

Now I did a bit of snooping through their source, and I found this on the main pages:

CODE

and I found the css as well, with these entries in there:

CODE

/*---navigation control---*/

#myMenu {
width: 100%;
background-color:#ffffff;

}

#myMenu span {
display: none;
visibility: hidden;
}

#myMenu a {
display: block;
padding-right: 0.4em;
padding-left: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
text-decoration: none;
}

#myMenu a:link {
background-color:#CCCCCC;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px; font-weight:normal;
    border-top: solid #ffffff 1px;


}

#myMenu a:visited {
background-color: #CCCCCC;
color: black;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
    border-top: solid #ffffff 1px;
}

#myMenu a:hover {
background-color: #54A4DE;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none; Font-Size:10px; font-weight:bold;
    border-top: solid #ffffff 1px;
}

#myMenu a:active {
background-color: ##CCCCCC;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
    border-top: solid #ffffff 1px;
}

Can someone please explain to me what exactly is going on here? I understand most of it, as css is fairly nice and lays everything out in realitivly easy-to-understand ways. I'd just like to know how I can modify the code to fit my needs, and know why I'm doing it instead of just doing it

Comment/Reply (w/o sign-up)

Latest Entries

vujsa

May 1 2005, 04:44 AM

QUOTE (nachtgeist03 @ Apr 29 2005, 07:22 PM)

#myMenu a {
display: block;
padding-right: 0.4em;
padding-left: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
text-decoration: none;
}

#myMenu a:link {
background-color:#CCCCCC;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px; font-weight:normal;
border-top: solid #ffffff 1px;

}

#myMenu a:visited {
background-color: #CCCCCC;
color: black;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
border-top: solid #ffffff 1px;
}

#myMenu a:hover {
background-color: #54A4DE;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none; Font-Size:10px; font-weight:bold;
border-top: solid #ffffff 1px;
}

#myMenu a:active {
background-color: ##CCCCCC;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #000000; TEXT-DECORATION: none; Font-Size:10px;
border-top: solid #ffffff 1px;
}[/code]

The section of css that you need to be concerned with is listed above.
#myMenu is the reference to <div id="myMenu" ... >

This means only apply the style to the html between <div id="myMenu" ... > and </div> only.

Next, lets specify even further which html code to apply the style to.
#myMenu a { specifies that the style described between #myMenu a { and } is only for anchor tags (<a ... >) inside the <div> tag with the id of myMenu. This applies to every anchor tag without consideration to any other parameters included in the tag.

To specify even further, we'll select the state of the anchor tag. When it just sits there and the link hasn't be visited, doesn't have the mouse over it and isn't active, then it is just a link.
#myMenu a:link { Specifies the state of being a link.
So the background color is light gray (#CCCCCC) ==> background-color: #CCCCCC;
And the the font color is BLACK (#000000) ==> COLOR: #000000;
*NOTE: Colors in all capital letters are actual browser recognized html colors
Additionally, active and visited links are the same.

So on to the highlighting.
#myMenu a:hover { Specifies the state of being a link.
So the background color is light blue (#54A4DE) ==> background-color: #54A4DE;
And the the font color is WHITE (#FFFFFF) ==> COLOR: white; * NOTE: Either use hexadecimal color codes or color names, using both results in messy code.

Additionally, a background image can be used instead of colors. Playing with border colors can also produce some interesting effects. For example if you set the top and left border to a lighter color than the background and the bottom and right border darker than the background will produce a raised button type effect. Then when you hover over it, reverse the colors and it looks as though the button was pressed.

A lot of really cool effects can be obtained using CSS properly.

Hope this helps.

Good luck.
vujsa

Comment/Reply (w/o sign-up)