Creating a subscribe button with CSS

Yesterday I sit down and began tweaking this website. I have a lot of time; but I’m very lazy to finish it in one day. So like always I spend more time than I should.
I started with the side bar; as you see at top I wanted to add a subscribe button. But this wasn’t as easy as I thought and this took a very long time.
To save time and efforts, I used an advanced CSS editors called “Stylizer“, it’s great and allows real time modifications.
To begin, let’s create a division where we’ll put our subscription link.


#rssfeed
{
width: 150px;
margin: 0 10px 0 0;
padding: 0;
height: 45px;
}


The subscribe link will be associated with a picture (for awesomeness); I thought the picture would better change when user hover the link.
This is not easy as it sounds, in the past used to use lists which makes it more easier, but now I have to use a “p” tag.


#rssfeed P
{
padding: 0 0 0 35px;
background-image: url(http://codeinput.com/images/rssfeeds.png);
background-repeat: no-repeat;
cursor: pointer;
margin: 0;
height: 45px;
}

Everything is perfect now (if you are offline of course!), still I need to style the link, since the subscribe button is a link. I thought of styling the link when not hovered and to change its’ color when hovered.
And here there’s another problem, you can’t use “a:hover” property, because the link color won’t change only if you hover the link. (If you have the “P” the picture will change but the link won’t). So here’s a trick to make them works together.


#rssfeed P:hover
{
background-image: url(http://codeinput.com/images/rssfeedshover.png);
}

Instead of using A:hover we use P:hover and change the A color. It works well!
Time to try the new button online. It works like it should but… it hangs a little when you hover it the first time. It seems that the second picture is not loaded automatically; so let’s do something.


#rssfeed P A
{
text-decoration: none;
color: #595959;
font-family: Georgia;
font-size: 16pt;
font-weight: bold;
}
#rssfeed P:hover A
{
color: #020202;
}


I browsed the Internet, there are few methods that can be applied. One is to create one image and slice it with CSS. The other is to load the image with Jquery.
Slicing is hard: I need to create one image and then slice with CSS.
Jquery is good: But I need to load the framework, add code, check with Firefox and I’m very lazy. So I come up with my own solution.
Let’s create a division, it’ll load the second image
Now in CSS, we are going to hide it, you can also place it absolutely so it doesn’t bother your template. For me, I just placed in the bottom (the easiet solution).


/** CSS Code **/
.imgload {
visibility:hidden;
}
/** HTML Code **/
<div class="imgload">
<img src="http://codeinput.com/images/rssfeedshover.png" alt="" />
</div>

Okay, now it’s working correctly (I’m using IE8 with Windows 7). Let me hear your suggestions.