Rollovers ( help! ), I don't understand. Options

[ZeT0]

I still don't understand how to do a rollover image.
I've looked at LEAST 10 different tutorials, still can't get it.
It seems to be the most common way is to have the words on the layout, say in the header, in a darker colour.
Then an overlay on top of that, with the lighter colour, and once hovered, changes the lighter colour picture's opacity to 0.
That is how I'd like to do it. ( Or any way that is simpiler. )
I have how ever found another way to do it ;

CODE

<style>div.message {position: absolute; top: 0; left: 50%; margin-top: 1085px; margin-left: -292px; width: 154px; height: 52px; color: 000000; font-family: arial; font-size: 12px; font-weight: bold; text-align: left; overflow: auto; padding: 4px;
}</style>

<div class="message"><style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<a href="LINKTOWEBSITE">
<img src="NORMALIMAGEHERE" class="nohover" />
<img src="ROLLOVERIMAGEHERE" class="hover" />
</a>
</style></div>

Etc, etc...
This is a VERY long procedure if there are multiple links, such as a contact box.
I used this code for a recent myspace I have created, and doing the 4 links actually took longer than the rest of the layout it self.
www.myspace.com/djvbs
If anyone could make a tutorial, or tell me how to do roll overs, an easier/better way, I'd appreciate it VERY much.
Especially a video tutorial! :)
Thankyou.