Friday 16 September 2011

How do you change the color on a hyperlinked text?

http://www.acnenomore.com/affiliateresources/index.htm



If you take a look at the above webpage, the internal links are blue. But when you just put your mouse cursor over it... then it goes red.



How do they do that?



I know how to make basic static websites using Frontpage but it doesnt have that hyperlink color change feature anywhere. I want to learn Dreamweaver but not sure if the program does that function.



Can anyone shed some light on how I can do this?
How do you change the color on a hyperlinked text?
The effect that you are seeing is called a rollover. Each link referes to a Javascript called sectionnavlinks (filename: sectionnavlinks.js). In the javascript file it calls a function to change the color of the link most likely based on the following function calls %26quot;onMouseOver %26quot;style=%26quot;color:Red%26quot;, onMouseOut style=%26quot;color:Blue%26quot;%26quot;.



You can open up sectionnavlinks.js in notepad and modify that onMouseOver section to show the colors that you want or if you want to get rid of it:



To undo this this:



1) Remove the reference to the class %26quot;sectionnavlinks%26quot; from your links:

%26lt;A class=%26quot;sectionnavlinks%26quot;

href=%26quot;sales-letter.htm%26quot;%26gt;%26lt;STRONG%26gt;Mini Sales Letters%26lt;/STRONG%26gt;%26lt;/A%26gt;



2) Edit the Body Tag:



Attributes for %26lt;BODY ...%26gt;

TEXT = color expression

ALINK = color expression (Active Link)

LINK = color expression (Link Color)

VLINK = color expression (Visited Link)



Check out the following Website for some Tutorials:

http://www.htmlgoodies.com/
How do you change the color on a hyperlinked text?
That is a mouse over effect and I am pretty sure that is in Front Page but it is a while since I used it. Dreamweaver certainly has that functionality



AJ
Usually it's by a special html code, think colour changer or something.



Far too technical but heres a site that may help



http://www.htmlgoodies.com/tutorials/col鈥?/a>



http://www.htmlbasix.com/mouseover.shtml



Hope that helps
%26lt;a href=%26quot;index.html%26quot; style=%26quot;color:Blue%26quot; title=%26quot;Blue Color Link%26quot;%26gt;Blue Color Link%26lt;/a%26gt;

Try this code

change the background color with onMouseover

... save save as Test.html and open in IE or Firefox (remember to turn on ActiveX)







%26lt;!DOCTYPE HTML PUBLIC %26quot;-//W3C//DTD HTML 4.0 Transitional//EN%26quot;%26gt;

%26lt;HTML%26gt;

%26lt;HEAD%26gt;

%26lt;TITLE%26gt; New Document %26lt;/TITLE%26gt;

%26lt;META NAME=%26quot;Generator%26quot; CONTENT=%26quot;EditPlus%26quot;%26gt;

%26lt;META NAME=%26quot;Author%26quot; CONTENT=%26quot;%26quot;%26gt;

%26lt;META NAME=%26quot;Keywords%26quot; CONTENT=%26quot;%26quot;%26gt;

%26lt;META NAME=%26quot;Description%26quot; CONTENT=%26quot;%26quot;%26gt;

%26lt;/HEAD%26gt;

%26lt;BODY%26gt;

Move the cursor to the color you want ...

%26lt;a href=%26quot;%26quot; onMouseover=%26quot;document.bgColor='red'%26quot;%26gt;Red鈥?br>
%26lt;br%26gt;

%26lt;a href=%26quot;%26quot; onMouseover=%26quot;document.bgColor='orange'%26quot;%26gt;鈥?br>
%26lt;br%26gt;

%26lt;a href=%26quot;%26quot; onMouseover=%26quot;document.bgColor='yellow'%26quot;%26gt;鈥?br>
%26lt;br%26gt;

%26lt;a href=%26quot;%26quot; onMouseover=%26quot;document.bgColor='green'%26quot;%26gt;G鈥?br>
%26lt;br%26gt;

%26lt;a href=%26quot;%26quot; onMouseover=%26quot;document.bgColor='magenta'%26quot;鈥?br>
%26lt;br%26gt;

%26lt;a href=%26quot;%26quot; onMouseover=%26quot;document.bgColor='purple'%26quot;%26gt;鈥?br>
%26lt;/BODY%26gt;

%26lt;/HTML%26gt;
All the above solutions will work, but they are all not recommended for 2 big reasons.



First, if you put the color code into every %26lt;a%26gt; link, that means when you want to change it, you will have to change it for every %26lt;a%26gt; link on all your pages. So if you want a link color to be the same throughout the page, it's better to declare it once at the beginning of the page so you need to change it only once.



Mark's solution of putting it in the %26lt;body%26gt; tag will work, but that leads to the 2nd reason why it shouldn't be done this way. If you really want to be standards compliant, the proper way to do it is to completely separate all your styles and formatting out of your HTML markup and put it in your CSS code.



So this is what you do in your CSS style at the top of your HTML page in the %26lt;head%26gt; element:

%26lt;style type=%26quot;text/css%26quot;%26gt;

a { color: blue; }

a: hover { color: red; }

%26lt;/style%26gt;



The %26quot;a%26quot; style is the color for all your links.

The %26quot;a:hover%26quot; style is the color for links when you mouseover it.

You can also use %26quot;a:visited%26quot; for links that you've already visited, and %26quot;a:link%26quot; for unvisited links.



And Frontpage and Dreamweaver should both be able to do it because they have code mode which you can and should be using. If you are really interested in building web sites, you should learn proper web design--use tools like Dreamweaver to help you create your design; don't depend on them to do the thinking for you. And I would say to stop using Frontpage because it creates really bloated and non-standard code.
  • delegates
  • ittwit
  •