nachtgeist03 0 Report post Posted April 21, 2005 (edited) 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! Edited April 21, 2005 by microscopic^earthling (see edit history) Share this post Link to post Share on other sites
miCRoSCoPiC^eaRthLinG 0 Report post Posted April 21, 2005 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. <SPAN id="span1"><a onmouseover="this.style.color='#FF7B1F'" onMouseOut="this.style.color='#000000'">Xisto 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. Share this post Link to post Share on other sites
signatureimage 0 Report post Posted April 21, 2005 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 somethinglike the following: <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.<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 Share this post Link to post Share on other sites
nachtgeist03 0 Report post Posted April 21, 2005 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 :rolleyes:Thanks guys (and gals if appropriate) Share this post Link to post Share on other sites
signatureimage 0 Report post Posted April 21, 2005 Dear nachtgeist03,In order to limit the CSS effects to the HTML <A> </A> tags ofthe text navigation bar only, we have to combine the style-definitionswith 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 <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 thetext nav bar <A> </A>, and not in the other <A> </A>.<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 postwill now be applied only to the <A> </A> of the text nav bar.Concerning your new question, about using the same CSS in allyour pages, without having to specify the <STYLE> </STYLE> ineach 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: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:<HEAD><LINK href="mycss.css" type="text/css" rel="stylesheet"></HEAD> Share this post Link to post Share on other sites
signatureimage 0 Report post Posted April 21, 2005 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 Iof the navigation information on my printed copy? None!So, why don't we - as web-designers - remove the navigationfrom 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= <HEAD><LINK href="mycss.css" type="text/css" rel="stylesheet"></HEAD>new=<HEAD><LINK media="screen" href="mycss.css" type="text/css" rel="stylesheet"></HEAD> 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:myNav {display:none;} (3)Again we modify the HTML that calls our common CSS file:original=<HEAD><LINK media="screen" href="mycss.css" type="text/css" rel="stylesheet"></HEAD>new=<HEAD><LINK media="screen" href="mycss.css" type="text/css" rel="stylesheet"><LINK media="print" href="myprintcss.css" type="text/css" rel="stylesheet"></HEAD> 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.<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? Share this post Link to post Share on other sites
nachtgeist03 0 Report post Posted April 21, 2005 *bows* you are the man :PThanks 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 Share this post Link to post Share on other sites
nachtgeist03 0 Report post Posted April 29, 2005 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: Share this post Link to post Share on other sites
vujsa 0 Report post Posted April 29, 2005 Try this: <td onMouseOver="this.bgColor = 'navy'" onMouseOut ="this.bgColor = 'Blue'" bgcolor="Blue"> your link here </td> Hope this helps. vujsaThis can also work for the entire row if applied to the <tr> tag instead of <td> tag. Share this post Link to post Share on other sites
nachtgeist03 0 Report post Posted April 30, 2005 well, let me post an example.http://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: <div id="myMenu"><a href="/">home</a> <span>|</span> and I found the css as well, with these entries in there:/*---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 Share this post Link to post Share on other sites
nachtgeist03 0 Report post Posted April 30, 2005 Excuse the double post please, forgot to mention that this: <a href="/">home</a> <span>|</span> is repeated for every entry on their nav bar. Share this post Link to post Share on other sites
vujsa 0 Report post Posted May 1, 2005 #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] <{POST_SNAPBACK}> 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 Share this post Link to post Share on other sites
