Webucator blogs about online learning and training.

I recently discovered there’s yet another way to create rollover images in Dreamweaver. This method actually doesn’t even require any knowledge of JavaScript, even minimally. You only need to know basic CSS. In fact, it doesn’t even require images.

How to create a rollover effect in CSS

If you remember how rollover images work, they are essentially two images that swap with each other depending on whether the cursor is hovering over them. We can create a similar effect in CSS through the use of the <a> tag’s pseudo-classes.

A link can have the following pseudo-classes:

  • a:hover – indicates the mouse pointer is over the link
  • a:visited – indicates the link has been visited
  • a:active – indicates the link is active (e.g, the user has clicked down on it)

By using traditional CSS properties “colors” and “text-decoration” in the link tag’s pseudo-classes (shown below), we can create the same visual effect of rollover images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
 a {
  color:#000066;
  text-decoration:none;
  cursor:pointer;
 }
 
 a:visited {
  color:#336699;
 }
 
 a:hover {
  color:#ff6600;
  text-decoration:underline;
 }
 
 a:active {
  color:#ffcc99;
  cursor:wait;
 }
</style>
<h1>CSS Links</h1>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>

Note that order matters. If a:active precedes a:hover, the effects in a:hover will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

By using even more properties, such as padding, margin, and border, it is possible to create links that look like buttons, something you would normally need images for. The following example illustrates this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
div {
 width:300px;
}
 
a {
 display:block;
 background-color: #eaf1dd;
 color:#060;
 text-decoration:none;
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.5em;
 padding: 6px 4px;
 margin: 4px;
 border-right: 2px solid #999999;
 border-bottom: 2px solid #999999;
 border-top-width: 0px;
 border-left-width: 0px;
}
 
a:hover
{
 color:#030;
 border: 1px solid #9999ff;
}
 
a:active
{
 color:#aca;
 border-left: 2px solid #030;
 border-top: 2px solid #030;
 border-right-width: 0px;
 border-bottom-width: 0px;
}
</style>
<h1>Button Links</h1>
<div>
 <a href="http://www.washingtonpost.com">WashingtonPost.com</a>
 <a href="http://www.webucator.com">Webucator</a>
 <a href="http://www.google.com">Google</a></div>

The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state.

default

Default State

a:hover

a:hover - Cursor hovering over link

a:active

a:active - Mouse click on link

Which method do you like better: the traditional, JavaScript method (which Dreamweaver can do for you, without you ever having to code), or the CSS method?

Comments are closed.

© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | Outside the USA: 315-849-2724 | Fax: 315-849-2723