Rollover question, I think I'm almost there...hopefully Options

[shynomi]

Ok, I've looked through a ton of resolved topics on this and the main band tutorial as well but I'm missing something.

I had found this tutorial that made it look the easiest so far for rollovers.
http://www.createblog.com/html_css-scripts...image-rollover/

I've got sliced images for my main header but have no clue where the rollover codes go,
in about me section where the rest of the codes are? or is there a certain area they need to go in?
I want to simply have rollovers on the contact links (send message, add to friends etc..)
on my page: http://www.myspace.com/frucatestpage

I have tried this code:

CODE

<style type="text/css">
a.SENDMESSAGE
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-1.jpg)repeat;width:336px;height:44px;display:block;}

a.SENDMESSAGE:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-2.jpg)repeat;}
</style>

That is for the send message link, I read where I have to use a transparent gif now in the original sliced link. That I don't get.

Here's the code for the sliced images in the main header, you'll see i have the class SENDMESSAGE in the link.

CODE

<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTQ4MjUxNjU4OA==" class="SENDMESSAGE">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-1.jpg" width="336" height="44" border="0" alt="" /></a></td>

Am I on the right track?
Sorry so long, just wanted to give every bit of info i could.