, is a simple way to get images to change when you hover over it with your mouse. It is perfect for using with buttons that use non-standard fonts, as embedding fonts online is hard, and not always legal.
I use it mostly for the xhtml, and css validation, as the images they provide are nice looking, but not the prettiest, and don't always go with the design I use.
Here is what you need to add to your CSS file in order to get it working:
.cssIhs a:hover img
{
visibility:hidden;
}
.cssIhs a:hover
{
background-image:url(img/css-ihs-hover.png);
background-repeat:no-repeat;
display:inline;
}
{
visibility:hidden;
}
.cssIhs a:hover
{
background-image:url(img/css-ihs-hover.png);
background-repeat:no-repeat;
display:inline;
}
That's all the CSS, now here's what to add to your HTML page:
<span class="cssIhs">
<a href="http://steve.deadlycomputer.com/try/css-ihs" title="CSS-IHS">
<img src="img/css-ihs.png" alt="css-ish" border="none" /></a>
</span>
<a href="http://steve.deadlycomputer.com/try/css-ihs" title="CSS-IHS">
<img src="img/css-ihs.png" alt="css-ish" border="none" /></a>
</span>
That's it, simple right! If you want to download a sample of the code, including what I used to get the xhtml/css validation at the bottom working:
Hopefully you get some use out this just like I did.
