The Third Degree

Dynamic Images with CSS Rollover States

This article expands upon the A List Apart article Sliding Doors of CSS, but instead of using background-image and background-position we'll load a dynamic image and set its margin using the anchor link, hover, visited, and active states. This method can be used for simple rollover states or active, hover, and visited states if your button action does not refresh the page. This article assumes that you have some knowledge of PHP or a server-side scripting language to be able to load in your own dynamic variables.

These methods have been tested and work in the following browsers: Firefox 0+, Mozilla 1+, Safari 1+, Opera 9, Internet Explorer 7.

Notice: The hover and visited states do not work in Internet Explorer 6, although the image is still masked by the containing div.

Simple Rollover State

The first example below explains how to create the dynamic image rollover state without a visited state.

First we need to setup our HTML:

<div id="featuredimage">
<a href="http://v2.jamesthethird.com/cmsadmin/<? echo $varLink; ?>" title="<? echo $varName; ?>"><img src="<? echo $varDynImage; ?>" alt="<? echo $varName; ?>" /></a>
</div>

We have a containing div that will mask off our image, an anchor tag, and an image tag with the dynamic variables to load in our data.

Creating the image:
For this example, your image size should be 200px by 200px. The hover state should occupy the lower 100px of the image, and the active state should occupy the upper 100px of the image. See example image below.

The CSS:

#featuredimage {
width: 200px;
height: 100px;
overflow:hidden;
}

Set the containing div to a fixed width and height and set the overflow to hidden.

#featuredimage a, #featuredimage img {
text-decoration:none;
border:none;
}
#featuredimage a:link img {
margin-top:0px;
}
#featuredimage a:visited img {
margin-top:0px;
}
#featuredimage a:hover img {
margin-top:-100px;
}
#featuredimage a:active img {
margin-top:0px;
}

Here we're controlling the placement of the image by setting its margin-top value with the anchor states. Notice all of the margin-top values are set to 0px, except the hover state, which sets the margin-top to –100px.

Active, Hover, and Visited States

Now let's create a button that will be able to show all anchor states, this method is only worth while if the button does not refresh the page, i.e. calls a Javascript function.

The HTML:

<div class="btn">
<a href="javascript:void(0);" onclick="this.parentNode.className='btnvisited';" title="<? echo $varName; ?>"><img  src="<? echo $varDynImage; ?>" alt="<? echo $varName; ?>" /></a>
</div>

For this method we need a little Javascript to switch the class of the containing div. Call your Javascript function from within the void() call in the href attribute or within the onclick attribute.

Create the Image:
Your button image should be 50px wide by 150px tall, to account for 3 - 50px by 50px states. The visited state in the top 50px, the active state in the middle 50px, and the hover state in the bottom 50px. See example image below.

CSS:

.btn {
width: 50px;
height: 50px;
overflow:hidden;
border: 1px solid #000000;
}
.btn a, .btn img {
text-decoration:none;
border: none;
}
.btn a:link img {
margin-top:-50px;
}
.btn a:visited img {
margin-top:-50px;
}
.btn a:hover img {
margin-top:-100px;
}
.btn a:active img {
margin-top:-50px;
}
.btnvisited {
width: 50px;
height: 50px;
overflow:hidden;
border: 1px solid #000000;
}
.btnvisited a, .btnvisited img {
text-decoration:none;
border: none;
}
.btnvisited a:link img {
margin-top:0;
}
.btnvisited a:visited img {
margin-top:0;
}
.btnvisited a:hover img {
margin-top:-100px;
}
.btnvisited a:active img {
margin-top:0px;
}

The btn class is our initial state on page load. The div is masked by setting the width and height to a pixel value and by setting overflow to hidden. With each anchor state we set the margin-top of the image to a pixel value in order to move the image to the correct state position.

We switch the parent div's class to btnvisited with the onclick event to align the image to the visited state, but keep the hover state intact.

You can see examples of both of these methods in use on the Home Page and the Portfolio section of this site.

Download or View a simplified example with inline code.

No Comments Posted.

Comments Closed.

Latest Posts

• GoBama! (Nov 4, 2008 - 8:14am)
• A Sunday Drive in Brazil (Aug 13, 2008 - 1:30am)
• Bicycles For Sale (Mar 15, 2008 - 7:30pm)
• Alphabet Soup: Understanding Accessibility [Part I] (Feb 26, 2008 - 10:56pm)
• Do Not Call At Work List (Feb 16, 2008 - 3:02am)

About The Third Degree

The Third Degree is James Van Arsdale III's personal blog. Topics covered will range from web design and development techniques to rants about cabs hitting cyclists, and everything in-between. I encourage all to join in on the discussions, or contact me directly.