Rollovers

If you want to add rollovers (buttons or images that change when you move the mouse over them) to your web-page, don't use a wizard, or Fireworks, to add them - have a go at making them yourself. They're surprisingly easy!

The first thing you need to do, if you're using a program such as Dreamweaver or Expression Web, is make sure that you can see the code for your web-page. Both applications have a setting that allows you to see both your page and the code that makes it. If you're using a program, such as Serif WebPlus, that doesn't allow you to see the code, then you really need to switch to something else before you can learn how to create web-pages properly.

Basic Idea

The basic idea is that you create two styles for your buttons, and you swap between them as the mouse moves over. This used to require programming, and something called JavaScript, but it's now much easier using a thing called CSS (Cascading Style Sheets).

CSS is what programs like Dreamweaver use to style text, buttons and images, and you can have two styles for the same thing - one for the object as it's normally displayed, and one for the object as you want it to appear when the mouse is moved over it. You don't need any code to swap between the two; the browser does it automatically.

It's important that you choose the two styles carefully so that the elements don't change size when the mouse moves over them - that can cause text-wrapping to change, or for things to be pushed up or down the page as the mouse moves around, which looks messy and harms readability.

Button 1

Simple Example

Look at the rectangle on the right - it's something called a "div", created with the <div> tag in HTML. It's like the web-page equivalent of a text-box. I've used a div, but you could use the same technique with a button or even just a hyperlink. In the code for this page, I've called the button button1, and I've added the following style definitions:

#button1 {color: red; background-color: yellow}
#button1:hover {color: yellow; background-color: red} 

What this does is give button1 a foreground colour of red and a background colour of yellow, but when the mouse hovers over it, the two colours are reversed. Move your mouse over the button and see what it does. That's with no JavaScript and no programming. Notice also that no graphics are required - CSS allows to create plain coloured buttons, or even buttons with gradient colours, without using a background image.

Button 2

Using More Attributes

Actually, the basic principle is the same - two different styles that we swap between - it's just that the styles are more complex. I'm sure you can create a better-looking button than this, but here are the styles for this button:

#button2 {border-radius: 10px; background-image: url(graphics/marble.png); color: white}
#button2:hover {background-image: url(graphics/marble_negative.png); font-weight: bold; border: 2px solid #AA0000; margin: 19px}

Notice that with CSS, you only need the :hover style to say what has changed when the mouse moves over - the font is still white and the corners are still rounded (border-radius rounds the corners, but only works with newer browsers) even though #button2:hover doesn't set the font color or border radius. Notice also that because the border gets thicker, that makes the button get bigger, so we need to reduce the size of the margin to stop everything shifting down and across the page.

Using Transitions

Spin Me!

Transitions and transformations are an exciting new addition in CSS3 and you can read more about them on the animations page.  Here I have combined them with the :hover selector to produce an effect that you might want to use sparingly!

The circle is a <div> with border-radius set to 50% to round off the corners.  It also has the CSS attribute transition: all 1s, which means that any changes applied to it will happen gradually over a period of 1 second - any new colours will fade in, and changing the angle will make the element rotate into position.  The :hover style simply inverts the foreground and background colours and uses transform: rotate(360deg) to effect the rotation.

Is That It?

Pretty much, although if you look at the source for this document, you'll notice an extra style:

.example {width: 200px; height: 50px; float: right; border: 1px solid black; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 24px; padding-top: 20px; margin: 20px}

What that style does is give both buttons a size, sets the font to one that looks like Arial, and positions the button on the right of the screen - you probably won't need that in a page that you're creating, I just added that because I wanted to put my example buttons next to the text.

You might have noticed that some style names begin with a #, some with a ., and it's also possible to have nothing at the start. What's the difference?

Style names with no prefix apply to all HTML elements with that name, e.g.

 p {font-size: 24px} 

would make all paragraphs have a font of size 24 pixels.

Style names that begin with a . apply to elements with that class name, so that .example style above applies to both buttons because they both have a class of example, e.g.

<div id="button1" class="example">

Finally, styles beginning with a # apply to elements with that id, so style #button1 only applies to the element with id="button1". This means that styles beginning with a # should can only be applied to one thing on the page, whereas styles beginning with . can be applied to many. In the case of button1 above, the browser will try to apply all the styles from both #button1 and .example.

NB.  There is a video on creating rollovers with CSS in my HTML and CSS YouTube playlist.

Problems?

Only users who have a mouse will get to see your rollover! A few years ago, that wasn't a problem, because everyone using the world-wide web was using a computer. Now, however, you have to consider that visitors to your site might be using a phone, tablet, or other touch-screen device.