CSS RolloversCross Browser CSS Image RolloversBy David Hayakawa Cross Browser CSS Image Rollovers
No Javascript Needed.
I'm always experimenting with CSS. While I'm not an expert with CSS, I'm getting better and feel more and more confident about using CSS in place of other more traditional methods.
I'm pretty sure this method of rollovers is much easier to use than Javascript. It still involves touching alot of code but getting rid of the Javascript is a big headache reliever for me. I use alot of javascript in my applications. Sometimes the scripts clash and I have to find ways to make multiple scripts work on one page.
If at all possible that means finding a way to not use the script itself. With that said, none of my rollover scripts have ever been a problem. Still, it's fun to try new things and get rid of old methods.
So lets begin with the example:
Here's the HTML to get us started. This is a section of code from the Admin section of my CMS.
<div id="create_directory_index_hover">
<a class="create_directory_index_hover" href="edit_directory.php" title="create directory"></a>
</div>
Here's the CSS to make this link an image rollover.
#create_directory_index_hover {
background: url( images/create_directory_index.gif) top left no-repeat;
width:56px;
height: 90px;
border: none;
float: left;
margin-left:12px;
margin-right:12px;
}
a.create_directory_index_hover:link, a.create_directory_index_hover:active, a.create_directory_index_hover:visited {
background: url( images/create_directory_index.gif) top left no-repeat;
width:56px;
height: 90px;
border: none;
float: left;
;
}
a.create_directory_index_hover:hover {
background: url( images/create_directory_index_over.gif) top left no-repeat;
width:56px;
height: 90px;
border: none;
float: left;
;
}
That's about it. Pretty Simple.
Print this Page | Email this Page to a Friend |
