|
|
| |
|
|
HTML Links : ADVANCED TEXTLINKS
|
Instead of just turning off the underline on all links you could be more specific in defining the way you want your links to work.
In the example below underlines are turned off for links.
The A:hoover tells the browser that when the mouse is over a link the underline should appear.
The hoover-option only works on MSIE 4+.
(But it does not cause an error in Netscape if you include it - the effect just does not appear.).
<html>
<head>
<title>This is my page</title>
<style type="text/css">
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline}
-->
</style>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com>This Link To Yahoo has no underline</a>
</body>
</html>
|
The methods describe above will turn off the underline-effect for links on the entire page.
If you want to turn off the effect for just a single link, add a styleproperty to the <a href>-tag:
<a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a>
|
NOTE:
The methods described only works on MSIE 3, Netscape 4 or newer browsers.
You can make multiple stylesettings instead of just removing the underline. Why not define the colors you want for active or visited links as well?
This example will show you how to:
<html>
<head>
<title>This is my page</title>
<STYLE TYPE="text/css"><!--
A.set1:link {color: #FF00FF; }
A.set1:active {color: #FFFF00; }
A.set1:visited {color: #00FFFF; }
A.set2:link {color: #AA00FF; background: FF00AA; text-decoration: none}
A.set2:active {color: #FF00AA; background: none transparent;}
A.set2:visited {color: #FFFF00; text-decoration: none}
--></STYLE>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com CLASS=set1> Yahoo </a>
<a href="http://www.hotbot.com CLASS=set2> Hotbot </a>
</body>
</html>
|
Try move the mouse over - or even click (links have been deactivated on this page) - the two links below to see how these effects would work:
|
|
| |
|
