Easy Rollovers with DHTML

How to make text and links change color with DHTML

DHTML Pit Stop | DHTML/JavaScript Tutorial Index

Home/DHTML/JavaScripts/Link Rollovers

To use these DHTML tutorials you should be familiar with style sheets. If you are unsure, you may want to read the Cascading Style Sheets Tutorials before going through this section.

With Cascading Style Sheets and DHTML, you can create easy rollovers on text and links without the use of images.

If you want to create a simple link color change for every link on the page, you can define a style for the links between the <HEAD></HEAD> tags. This is done with the hover property:

<HEAD>
<STYLE type="text/css">
<!--
A:hover { color:red }
-->
</STYLE>
</HEAD>

You can see an example below, the link will change to red when your mouse passes over it:

I'm a color changing link!

If you want all of the links to have no underline, you can add the text-decoration command to your style sheet:

<HEAD>
<STYLE type="text/css">
<!--
A { text-decoration:none }
A:hover { color:red }
-->
</STYLE>
</HEAD>

Now you will get a link with no underline, that changes color:

I'm a color changing, non-underlined link!

Nifty trick, isn't it? You can also use the background-color property to make links highlight when the mouse passes over them. I'll make this one with no underline as well, it will look better with the effect. Again, use a style sheet in your head section:

<HEAD>
<STYLE type="text/css">
<!--
A { text-decoration:none }
A:hover { background-color:yellow }
-->
</STYLE>
</HEAD>

Now your links will have a rectangular highlight, like the example below:

John, this is getting ridiculous. I don't want to be a link anymore.

Yes, you can use a background image too. Same type of code, but using the background-image property with the url:

<HEAD>
<STYLE type="text/css">
<!--
A:hover { background-image:url(http://www.pageresource.com/backimgs/back58.jpg) }
-->
</STYLE>
</HEAD>

Now, you get a wonderful link like this:

John, what did I tell you about changing links?

What if I want different colors for different links?

Oh, so now you want to make it more complicated...Now you are going to need style sheet classes. I suppose we can get that to work too, let's start by using classes.

Using Classes for Links and Groups of Links

If you want a certain group of links to do the same thing, this is a nice way to do it. If you want one set to change color, and the other to highlight with a background color, you can use two style sheet classes. I named them link1 and link2 here. Notice that when we use the hover property, it changes the look of the class declaration a liitle. The brackets are not used until after we place the A:hover command. After that, it is a normal class. Here is the code we will use here:

<HEAD>
<STYLE type="text/css">
 <!--
.link1  A:hover { color:red }
.link2  A:hover { background-color:yellow }
-->
</STYLE>
</HEAD>

Now, to make this work we will need to use <SPAN></SPAN> tags around each section of links, and assign it to one of the classes. So, to get a set of links that change to red, we will use class="link1". Here is the example:

<SPAN class="link1">
<A HREF="index.html">DHTML Main</A>
&nbsp;&nbsp;
<A HREF="indexcss.htm">CSS Tutorials</A>
</SPAN>

This will give you the links below:

DHTML Main CSS Tutorials

Now, you can add the second set using a SPAN tag with class="link2", and you will have two sets of links doing different things.

<SPAN class="link1">
<A HREF="index.html">DHTML Main</A>
&nbsp;&nbsp;
<A HREF="indexcss.htm">CSS Tutorials</A>
</SPAN>
<BR>
<SPAN class="link2">
<A HREF="index.html">DHTML Main (Again)</A>
&nbsp;&nbsp;
<A HREF="indexcss.htm">CSS Tutorials (Yes, again!)</A>
</SPAN>

Now you will get the nice set of links below. You could get pretty wild with this I suppose...

DHTML Main CSS Tutorials

DHTML Main (Again) CSS Tutorials (Yes, again!)

Now, don't you want to go have a link changing party? Maybe not...but maybe you will find a use for this along the way. It can certainly make things interesting!

Well, that does it for now. Let's go on to Moving an Object.

By: John Pollock