Change image on hover? Options

[xzi]

Alright, well my profile is almost done, now all I want is to put a few images.. "buttons" off to the left side of my page.
This div layout was done in profile 1.0

My page: www.myspace.com/noloyalty

Basically I wanted to use this:


And when you hover over it, it will look like this (change colors)


I'm still relatively new at doing div, and I've never actually used any hover options in a div. So any help would be appreciated.



Also, here are the codes I'm using.

About Me

CODE

<style>
.main {
position:absolute;
left:50%;
top:185px;
width:800px !important;
z-index:1;
margin-left:-450px;
}

.ftd
body table {margin-top:-5000px;}

.ftd
body td table, body div table {margin-top: 0;}

.ftd
table, tr, td {background-color:transparent;}

.ftd
body div table form{display:none;}

.ftd
body table div form{display:block;}

.ftd
div table td font {visibility:hidden; }

body{
background-color:000000;
background-image:url(http://i793.photobucket.com/albums/yy220/0xzi/1259759773174-1.jpg?t=1259885068);
}
.bg1{
width:900px;
height:1100;
position:absolute;
top:0px;
left:0px;
z-index:1;
overflow:visible;
}
.mypic{
width:180px;
height:236;
position:absolute;
top:103px;
left:49px;
z-index:1;
overflow:hidden;
background-color:transparent;
color:ffffff;
font: 10pt Arial,Helvetica,sans-serif;
text-decoration:none;
}
.generalinfo{
width:281px;
height:228px;
position:absolute;
top:126px;
left:280px;
z-index:1;
overflow:auto;
background-color:transparent;
color:99CCFF;
font: 11pt Arial,Helvetica,sans-serif;
text-decoration:none;
}
.general1{
width:281px;
height:228px;
position:absolute;
top:190px;
left:260px;
z-index:1;
overflow:auto;
background-color:transparent;
color:99CC99;
font: 8pt Arial,Helvetica,sans-serif;
text-decoration:none;
}
.ABOUTME{
width:413px;
height:461px;
position:absolute;
top:560px;
left:20px;
z-index:1;
overflow:auto;
background-color:transparent;
color:99CC99;
font: 8pt Arial,Helvetica,sans-serif;
text-decoration:none;
}
.music{
width:300px;
height:340;
position:absolute;
top:100px;
left:574px;
z-index:1;
overflow:hidden;
background-color:transparent;
color:ffffff;
font: 10pt Arial,Helvetica,sans-serif;
text-decoration:none;
}
.video{
width:423px;
height:342;
position:absolute;
top:678px;
left:461px;
z-index:1;
overflow:hidden;
background-color:transparent;
color:ffffff;
font: 10pt Arial,Helvetica,sans-serif;
text-decoration:none;
}


</style>

Who I'd Like to Meet:

CODE

<div class="main">
<table style="width: 900px;
height: 1072px;
cellpadding: 0px;
cellspacing: 0px;
background-color: FFFFFF;">
<tr><td valign="top">




<div class="bg1"><img src="http://i793.photobucket.com/albums/yy220/0xzi/midfullfinal.png?t=1260060725" /></div>


<div class="mypic"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=23755108" target="_blank"><img src="http://i793.photobucket.com/albums/yy220/0xzi/myspaceavabackdrop.png" border="0" alt="Photobucket" /></a></div>

xzi.; // Christopher Ringel // Foopher

<div class="generalinfo"><b>UNDER CONSTRUCTION</b></div>

<div class="general1"><b><u>Location:</u></b> Melvindale, Michigan
<br /><b><u>Birthday:</u></b> March 10th, 1991
<br /><b><u>Gender:</u></b> Male
<br /><b><u>Status:</u></b> Single
<br /><b><u>Religion:</u></b> Atheist
<br />
<br />
<br />
<font color="”#9999FF”"><center>profile design by:</center></font>
<font color="”#CCFFCC”"><center>Xzi</center></font>
</div>


<div class="ABOUTME">
<center><b>I'm Chris.</b>
<br /><b>Gamer, Nerd, Graphic Artist, Musician</b>
<br />
<br />Well, to start off, like I said, I'm a gamer. I play many different genres of games, on all current-gen systems, but I prefer the Computer over everything. Lately the games I have been playing have been Team Fortress 2 and Call of Duty: Modern Warfare 2 (both on PC) ...if you want to play something hit me up on steam. The steam link is to the right of the page.
<br />
<br />Another very large part of my life is music. I almost always have something playing when I'm at home. I'm that kid you see with a green fauxhawk listening to twiztid while wearing a slayer shirt. (actually happened.. lol)
<br />I'm pretty open about what I listen to, I like a bit of everything except country, It's just not my dealio.
<br />Aside from that, I can't stand people that insist on talking about how shitty YOUR music choices are just because they dislike that song / genre / band.
<br />
<br />I dropped out of school, and I don't plan on going back. I had great test scores, but I missed too many days without a doctors note on a few cardmarkings, causing me to get an automatic 0 in each class, so I just decided to quit.
<br />
<br />When I'm not gaming and in my free time, I usually am working on something in photoshop. I enjoy doing photo manipulation and creating things in general. Not only photoshop, but I do edit videos from time to time.
<br />
<br />
<br /><font size="3"><font color="”#99FF99”"><b>Who I'd like to meet:</b></font> </font>
<br />
<br />
To be honest, I one day hope to meet somebody that feels the same way I do, maybe likes the same music, so we could enjoy concerts or something together :)
<br />
I want to meet somebody special.
</center>
</div>





<div class="music">
<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:292px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="332" width="292" style="width:292px; visibility:visible; height:332px;" border="0">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.MUSICPLAYLIST.US/mc/mp3player_new.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="tomy=http%3A%2F%2Fwww...%2Fext%2Fpc%2Fconfig_black.xml&mywidth=292&myheight=332&file=http%3A%2F%2Fwww...%2Floadplaylist.php%3Fplaylist%3D2891839%26t%3D1260071878&wid=ms" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.MUSICPLAYLIST.US/mc/mp3player_new.swf" height="332" width="292" style="width:292px; visibility:visible; height:332px;" border="0" wmode="transparent" flashvars="tomy=http%3A%2F%2Fwww...%2Fext%2Fpc%2Fconfig_black.xml&mywidth=292&myheight=332&file=http%3A%2F%2Fwww...%2Floadplaylist.php%3Fplaylist%3D2891839%26t%3D1260071878&wid=ms" />
</object></div>
</div>




<style>
.video {position:absolute; top:#700; left:#574; z-index:9;}
</style>

<div class="video">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="342" width="423">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/yr8oQkTALWY&hl=en_US&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/yr8oQkTALWY&hl=en_US&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" height="342" width="423" wmode="transparent" />
</object>
</div>



</td></tr></table></div>
<div style="position:relative; height:400px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>

[barrykins]

If im not mistaken..ive never used it in myspace but

put this where your button would be

CODE

"<a href="http://yourlink.com"><img src="IMAGE1.jpg" onmouseover="this.src='IMAGE2.jpg'" onmouseout="this.src='IMAGE1'" alt="Click Me"></a>"

[xzi]

This code is not working for myspace. It basically is only showing up one picture once I save it in myspace, it deletes the rest of the code.

[barrykins]

What you could do is change the alpha here is a code I would use.
You would leave an image underneath the original using div. Following?
Then what you would do it use a hover command on the top image to change the alpha to 0 when you hover over.

here is the codes

First in your style code you will put this. This will control the alpha of your top image.

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: ???px; left: ??%; height: ??px; width: ??px; overflow: visible; background-color: transparent; margin-left: ??px; text-align: left; z-index:??;}

Then include this div in your code. This will be your bottom image.

CODE

<div style="width: ???px; height: ???px; position: absolute; margin-left: ???px; left: ???%; top: ???px;">
<img src="image.jpg"><br>
<br><a href="link">
</div>

This will be your bottom image.

CODE

<div class="navigation">
<table id="__navigation" border="0" cellpadding="0" cellspacing="0" width="???"><tbody>
<tr>

     <td>
<a href="link.html"><img src="image.jpg" alt="" border="0" height="??" width="???"></a>

     </td>
</tr>
</tbody></table>

</div>

With that it will make your top image disappear on rollover, leaving just your bottom image.

[xzi]

Thank you so much for the help, was a bit difficult to understand a few parts.. however I found a code that worked for me before I re-checked the forums.

If anybody stumbles upon this page this may help out, it does exactly what barrykins does just shorter.
Here's the code I found.

This goes in your Style section:

CODE

a.addme {position:absolute; top:???px; left:??%; margin-left:???px; z-index:3; width:???px; height: ???px; display:block;
background-image:url(INSERT YOUR HOVER IMAGE LINK HERE);}
a.addme img {border:0px;}
a.addme:hover img {visibility:hidden;}

This goes in your DIV section:

CODE

<a class="addme" href="YOUR LINK HERE" target="_blank"><img src="INSERT YOUR IMAGE HERE" /></a>

...you can obviously change the "addme" with whatever you want to name that part of your div, just be sure you replace it both in the Style and on the Div. Also, replace the ???'s with the pixel numbers.

[Mickey]

Topic closed & moved.