Keeping it simple with image rollovers, part 1

Recently a friend of mine was working on a Web page for a museum that contained a long list of items, with a simple image rollover for each one. There were some issues displaying the rollovers in Opera so I offered to take a look. Looking over the markup, I was reminded of why simple examples of things like rollovers that one might find on the Web usually don't scale well.

So, I'm providing here a technique that those who aren't fluent in JavaScript might find useful. It's assumed that the reader is familiar with the basics.

Using CSS For Simple Rollovers

(The examples below can be downloaded from http://www.ispeakdeutsch.com/examples/simple_rollovers.zip)

Let's take a look at how a simple image rollover-- an image that changes when the mouse moves over it-- works. First, I'm going to create a skeleton HTML file:


<title>Simple CSS Rollover</title>
</head><body>
<h1>Simple CSS Rollover</h1>
<div id="rollover">
</div>
</body><html>


See the <div>? That's what we're going to use to hold the image for the rollover. (In case you've never used one before, a <div> is just an HTML elements which can be used to hold "anything". So whereas you might use a <p> for a paragraph of text, and <img> for an image, a <div> is just something generic.)

The way that we're going to set this up is via the CSS background-image property. Just like its named, this property controls what image is used for the background of a page element. The most common usage is:

background-image: url('directory/some_file');


So let's add that in to the HTML by adding a <style> element to the top of the page:

<html><head>
<title>Simple CSS Rollover</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: solid thin black;
}

#rollover {
background-image: url('images/one.png');
}
</style>
</head><body>


Note that I also add in a height and width for the>div< as well as a thin black border to make it easier to see what's going on. Now the page should look like this in a Web browser:



In order to make the image change when the mouse moves over it, we'll need to use the CSS ":hover" pseudo-class to our CSS:

#rollover:hover {
background-image: url('images/two.png');
}


After saving the file and reloading the Web page, if you move your mouse over the image this is what you should now see:

 

So what's actually happening here?
  1. The div has an id of "rollover". The browser sees this in the page's CSS and initially set's the div's background-image to "images/one.png".
  2. When the user places his or her mouse over the div, the browser sees the "#rollover:hover" section in the CSS. Since the background-image has changed, now the browser displays a different image in the div.
  3. If the user moves the mouse away from the div, the ":hover" will no longer be active, so the browser will go back to displaying just the "#rollover" style.
Finally, here's what the full text of the HTML file should look like:

<html><head>
<title>Simple CSS Rollover</title>

<style type="text/css">
div {
width: 200px;
height: 200px;
border: solid thin black;
}

#rollover {
background-image: url('images/one.png');
}

#rollover:hover {
background-image: url('images/two.png');
}

</style>
</head><body>
<h1>Simple CSS Rollover</h1>
<div id="rollover">
</div>
</body></html>

Comments

Popular posts from this blog

Monitoring with statsd and CloudWatch

Xen, "hwcap 0 nosegneg", and -mno-tls-direct-seg-refs

A Grand Adventure: compiling transmission on my home router