DIV Rollovers, HELP! Options

[toyming]

Ok, I'm going to rephrase this post. I'm not a noob, but to rollover codes I am. The coding I posted, did not work. I replaced it with Relentless's fixed coding, and I am still having the same exact problem. The rollovers are not showing up. The second image is there, just for some reason on here the link messes up. I do not know how to position the rollovers where I want them. I need help in those areas. I am trying to learn how to do rollovers, but every tutorial I have found so far, or person I have talked with has left me like this: O.o. My questions are not all being answered. I need a step by step tutorial to learn how to do them, including solutions to the problems I listed above. Please and thank you.

Here is the coding I have in my myspace atm:

ABOUT ME:

CODE

<div style="position: absolute; top: 0px; left: 0px; width: 1280px; height: 800px; background-color: transparent; border: 0px solid #000000; overflow: hidden;">
<img src="http://img208.imageshack.us/img208/7852/lovelayoutae9.png">
</div>


<style type="text/css">
body {
background-image: url ('http://img175.imageshack.us/img175/2782/backgroundek9.png');
background-position:top center;
background-repeat:repeat; background-attachment:fixed;
border-width:0px;
border-color:FFFFFF;
border-style:solid;
}

.orangeText15 {display:none;}
.nameText {display:none;}
.friendSpace {display:none;}
.friendsComments {display:none;}
.contactTable {display: none;}
.extendedNetwork {display:none;}
.latestBlogEntry {display:none;}
.userProfileURL {display:none;}
.userProfileDetail {display:none;}
.bottomlinks {display:none;}
.ImgOnlineNow {display:none;}
.profileinfo {display:none;}

table tr td div div {
visibility:hidden;
display:none;
border:0px!important;
background-color:transparent;
}

td,
.whitetext12,
.lightbluetext8,
.blacktext12,
.btext,
.text,
.orangetext15,
.nametext,
.redbtext,
.redtext,
A:link,
A:visited,
A:active,
a.redlink:link,
a.redlink:active,
a.redlink:visited,
a.searchlinksmall:link,
a.searchlinksmall:active,
a.searchlinksmall:visited,
a.searchlinksmall:hover,
a.font,
table td div div font,
div table tr td font
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8pt;
color:black;
}

a.navbar,
a.navbar:link,
a.navbar:active,
a.navbar:visited{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:7pt;
color:black;
}
a.navbar:hover{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:7pt;
color:88bbff;
}
a.redlink:hover,
A:hover{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8pt; text-decoration:none;
color:88bbff;
}


td.text table {width:100%;}
.friendsComments td table, .friendsComments td.text table, .friendSpace table, .blurbs, .blurbs td.text {background-color:transparent; border:0px;}

tr, td {background:transparent;border:0px;}

</style>

<style>div[id="googlebar"],
div div select{
opacity:0;
filter:alpha(opacity=0);
display:none !important;
position:absolute !important;
bottom:2000px !important;}</style>


<div style="position: absolute; top: 365px; left: 525px; width: 200px; height: 150px; background-color: transparent; border: 0px solid #000000; overflow: auto;">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPTIwNDg1NjE4Mg==">add</a>///<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yMDQ4NTYxODImTXlUb2tlbj1iOTU4Yjg1MC02NGIyLTQxMGEtOThjZC1hOWY1Z
ZlNzc1Y2M=">msg</a>

PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
PROFILE UNDER MAITENANCE.
</div>


<style type="text/css">
div, table, tr, td, tbody {background-color: red;}

a.home {
display:block;
height:44px;
width:125px;
overflow:hidden;
background-image:url ('http://img444.imageshack.us/img444/9550/homecu1.png');
background-position:top center;
background-repeat:no-repeat;}

a.home:hover {
background-image:url ('
http://img166.imageshack.us/img166/4720/ho...kgd2.png');
background-position:top center;
display:block;
height:44px;
width:250px;
background-position:top center;
background-repeat:no-repeat;}
</style>


</style>

I'D LIKE TO MEET:

CODE

<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" class="home" border=0></a>

Bottom line: I need help. Anyone?

[Relentless]

Please post your coding. Those links you gave me are not interfering at all. You can do roll overs on a div, and it's basically in your title. o.O

It's a simple code, yet you have to make the 2 images together.

//

Your image links are not correct. The last hover one, theres no image. On that particular one, have your actual image map on the top, and then the hover part on the bottom. Thus, having the same width but double the height.

Since it's like this..

CODE

a.home {
display:block;
height:44px;
width:125px;
overflow:hidden;
background-image:url ('http://img444.imageshack.us/img444/9550/homecu1.png');
background-position:top center;
background-repeat:no-repeat;}

a.home:hover {
background-image:url ('
http://img166.imageshack.us/img166/4720/ho...kgd2.png');
background-position:top center;
background-repeat:no-repeat;}

It should now be like this.

CODE

a.home {
display:block;
height:44px;
width:125px;
overflow:hidden;
background-image:url ('http://img444.imageshack.us/img444/9550/homecu1.png');
background-position:top center;
background-repeat:no-repeat;}

a.home:hover {
background-image:url ('
http://img166.imageshack.us/img166/4720/ho...kgd2.png');
background-position:top center;
display:block;
height:44px;
width:250px;
background-repeat:no-repeat;}

Once you get the images done, your coding will be like this.

CODE

<a href="LINK HERE" class="home" border=0></a>