Create a Text Rollover
Click here for Spanish translationIn 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 CSS reference guide.
I also highly recommend getting the Web Developer Extension for Firefox. 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!
Current Comments
16 comments so far (post your own)thanks for the code - i tried your first item, the color rollover, and it works. the others don't, and also, your samples on this page don't work either....what's up?
and there are no links to get the code....???
Posted by linda on Monday, 09.6.04 @ 09:20pm | #154
Great tute. But one question:
I have all my links in a table and i want them to be underlined on mouseover. This seems not to work in a table.. Does Someone know a solution?
Posted by Oane (not yet)on Wednesday, 02.23.05 @ 02:32pm | #369
Great Tutorial!!! Works great For me.
Posted by Wild E. Coyote on Thursday, 07.28.05 @ 09:41pm | #629
Nice tutorial, but what I want to do is have the text be underlined on mouseover but not in the normal state! Could anyone tell me how?
Posted by Bruce on Saturday, 10.28.06 @ 11:00am | #2642
I am wondering if you can tell me how to do a mouseover that would allow for an info window to pop up and provide more info about the "link" kinda like a product type info window..
Posted by *kttn* on Wednesday, 03.21.07 @ 08:09am | #2803
Hello sir,
I have a problem
I am talking about the Aspx page.
I which i use div in this i take anchor tag
now problem is that i specify some width [fixed] to that div and if my text of the anchor is less than the width of that div then also my anchor rollover is working for the blank spaces
Is there any other way to solve this problem.
Let me know ASaP
thanks,
vandana
Posted by Vandana (Reply it)on Monday, 03.26.07 @ 12:25am | #2809
Reply to Bruce:
heres the code...
<style type="text/css">
<!--
a:link {
text-decoration: none/;
}
a:hover {
text-decoration: underline/;
}
-->
</style>
Posted by Emma on Saturday, 03.31.07 @ 11:29pm | #2819
verynice site
Posted by sanjay on Monday, 04.16.07 @ 09:01am | #2843
I have a question.
I'm making a website and I would like rollover to work for me. My idea is that when you rollover a group of specified text, a bubble pops up under the text and it gives like a little brief description of the group of words. Please reply back to my email ... crazydork1012@aol.com. Thanks
Mike
Posted by Mike on Sunday, 05.6.07 @ 05:06pm | #2867
hi,
I was wondering if you could show me how to do the rollover like the links above "Click here for Spanish translation" or "email". When you do the rollover the blue boxes pop up. Did i miss something in the instructions above?
Plus, is there a way to have images pop up when doing rollovers like the website below? Is this CSS or something entirely different. How did they do that?
http://www.kitsune.fr/
thanks,
Neal
Posted by neal on Wednesday, 05.23.07 @ 03:46pm | #2894
hi,
I was wondering if you could show me how to do the rollover like the links above "Click here for Spanish translation" or "email". When you do the rollover the blue boxes pop up. Did i miss something in the instructions above?
Plus, is there a way to have images pop up when doing rollovers like the website below? Is this CSS or something entirely different. How did they do that?
http://www.kitsune.fr/
thanks,
Neal
Posted by neal on Wednesday, 05.23.07 @ 03:46pm | #2895
very very beautifuly
Posted by arrita (arrita-7.piczo.com)on Tuesday, 06.5.07 @ 01:14pm | #2915
Would you be able to figure out how
jeremycowart.com rollover text thing works?
Posted by lisa on Wednesday, 09.5.07 @ 12:07pm | #3009
Thnx very helpfull!! saw this on
http://www.mr-tut.com/
Posted by Mr tut (http://www.mr-tut.com/)on Monday, 10.22.07 @ 08:41am | #3057
hi,
I am using an inline style sheet and have created rollover text links. I would like to create two different styles of rollover text in the one stylesheet. is this possible??
thanks
Ali
Posted by Ali Nimmo (http://www.go-sardinia.com)on Tuesday, 12.4.07 @ 03:25am | #3109
CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
Posted by serzer biiaym (http://WWW.css-lessons.ucoz.com/index.html)on Friday, 05.2.08 @ 07:45am | #3317
Rate this Tutorial
Current Rating: