|
|
|
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 underlining is turned off for all links.
The A:hover tells the browser that when the mouse is over a link the underline should appear.
The hover option only works on MSIE 4+.
(But it does not cause an error on 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 described 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 style property to the <a href> tag:
<a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a>
|
|
NOTE:
The method described above only works on MSIE 3, Netscape 4 or newer browsers.
You can make multiple style settings instead of just removing the underline. Why not define the colors you want for visited links as well?
This example will show you how:
<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 clicking the two links below to see how these effects would work. (links have been deactivated on this page)
You can create much more advanced links with CSS (Cascading Style Sheets). If you're new to CSS you can learn all about it at our CSS-tutorial. If you're allready familiar with CSS you can learn all about CSS-links in the section about CSS-links.
|
|
|
|
"Better Than Books - As Easy As It Gets!"