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.

[ZeT0]

Do you know how to do the roll overs like on this myspace :
www.myspace.com/confessionhc

STYLE:

CODE

div.navigation a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:1;
}
.navigation { position: absolute; top: -460px; left: 50%; height: 0px; width: 900px; overflow: visible; background-color: transparent; margin-left: -665px; _margin-left: -704px; _top: -468px; text-align: left; z-index:8;}

DIV :

CODE

<div class="navigation">
<table id="DANCEGAVINDANCE_navigation" width="900" border="0" cellpadding="0" cellspacing="0">
<tr>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0zNjk0MDc3MTk="><img src="http://i25.tinypic.com/2zz8dcm.jpg" alt="" width="313" height="35" border="0" /></a></td>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zNjk0MDc3MTkmTXlUb2t"><img src="http://i25.tinypic.com/347jkpl.jpg" alt="" width="251" height="35" border="0" /></a></td>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjk0MDc3MTk="><img src="http://i26.tinypic.com/23h3kux.jpg" alt="" width="173" height="35" border="0" /></a></td>

<td><a href="http://www.msplinks.com/MDFodHRwOi8vYmlnY2FydGVsLmNvbS8="><img src="http://i30.tinypic.com/11lo4lz.jpg" alt="" width="213" height="35" border="0" /></a></td>


</tr>
</table>
</div>

This LOOKS like the easiest way.
Does anyone else do it like this?
If so, keen to explain it? :)