Create a Text Rollover
In this tutorial I was show you how to create these nifty text rollovers. I assume you have a basic knowledge of HTML, and know what CSS is. If you have any questions or comments e-mail me. (That link is an example of a text rollover). Use this technique to remove the underline from links, or highlight text, etc.
This first step is to decide whether you are using a Inline Style, and Embedded Style Sheet, or an External Style Sheet. I will be showing you how to do it using a embedded style sheet, but it is easy to convert to fit your preferences.
Under the <HEAD> tag of your web page, you need to add a style tag, as shown below.
<HEAD> <STYLE TYPE="text/css"> <!-- --> </STYLE> </HEAD> .... |
Now you need to add the styles. I am assuming you are using it for a link, so I will use the anchor tag.
<HEAD>
<STYLE TYPE="text/css">
<!--
a:link { color:#001760;}
a:hover { color:#FFF000;}
-->
</STYLE>
</HEAD>
....
|
This will create a blue link, that when the mouse hovers over, will change to yellow, like this.
When making a rollover, you can do more than a color swap. By using CSS properties, you can change the font, size decoration, etc. For example:
<HEAD>
<STYLE TYPE="text/css">
<!--
a { color:#001760; text-decoration:none;}
a:hover { color:#001760; text-decoration: underline; }
-->
</STYLE>
</HEAD>
....
|
This will get you a link like this. The only mandatory parts you need to change to create a rollover is the link, and hover styles. Here is a list of attributes you can add to create a custom rollover:
"font-family: times;"-Changes the font. Example Link.
"font-style: italic;"-Make the text italic. Example Link.
"font-variant: small-caps;"-Make it in small caps. Example Link.
"font-weight: bold;"-Change the boldness. Example Link.
"font-size: 18px;"-Change the font size. Example Link.
"color: #ff0000;"-Changes the color. Example Link.
"text-decoration: line-through;"-Add an underline, overline, line-through, or blink. Example Link.
This is just a sample of what you can do. To learn more, try looking at a
I also highly recommend getting the for . This will let you edit CSS on the fly on any web page (great to experiment with).
Thats all there is to it! Easy, huh. Good luck!