Rollover tutorial 1b ( a variation )
Okay, for the variation I'll be referencing this tutorial with http://www.livejournal.com/customview.cgi?styleid=493319&user=aucune_gloire. Please be sure to have read http://www.livejournal.com/users/aucune_gloire/62776.html?view=649784#t649784 as I will skip over alot of redundent explainations and skip straight over to the coding. If you're using mozilla and firefox then you should be using this one. It's a bit more complicated than the other but if you're CSS savvy, no problem. Paintshop pro indications will be in red and coding in blue.

Graphics Work
You should go about the same way as explained in http://www.livejournal.com/users/aucune_gloire/62776.html?view=649784#t649784. Nothing really changes so go ahead and knock yourself out there. Once you're done with it mosey on over to the codes. Hooray!

Coding
Remember to replace your <img sr="..."> by a div layer containing a text link to wherever it is <DIV ID="userinfo"><A HREF="http://www.livejournal.com/userinfo.bml?user=aucune_gloire">USERINFO</A></DIV>

For this we have 3 subsections instead of 2: a div layer and two link properties of this div layer. XD Try and not get confused between the 3 as I did for about an hour. So use comment coding if you have to remind yourself. To comment in CSS, do the following /* Comments here */ and you have your stick-it all ready for use. It's just like HTML commenting <!-- Look familiar? -->. Right so we have:

#userinfo {
background-image: url('http://pics.livejournal.com/aucune_gloire/pic/0000gpfd') !important; /* I specify !important here just in case it happens to clash with anything else */
background-position: 0px -70px; /* The div layer has the outmouse image */
background-repeat:no-repeat;}

#userinfo a {
text-indent: -1000em;
background-image: url('http://pics.livejournal.com/aucune_gloire/pic/0000gpfd');
background-position:top left; /* Again 0 0 may be used instead. The link has the onmouse image */
background-repeat: no-repeat;
display: block;
margin:0px;
width: 114px;
height: 70px;
overflow: hidden}

#userinfo a:hover {
background-image:none;}

:O As a reminder to people not familiar with z-index. It's basically layers, like your skin. One on top of the other but separate from one another. When not indicated they have their default z-indexes. Backgrounds by default are ALWAYS on the bottom. This can not be altered, no matter how much you try. Okay, back to the idea of the mechanism for this. Basically your div layer has the outmouse image and your link has a background of the onmouse image (same height and width so it totally covers the div layer's image). So when you move your mouse over the image it disappears as specified by your #userinfo a:hover. And now all you can see is the onmouse one. And then you're done.

There are many variations to this. If you don't want the links to go anywhere and have some random rollover then just replace the url with # so it looks like <a href="#">