Help - Search - Members - Calendar
Full Version: Rollover Problems On Band Page
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
dollywood
Jan 1 2010, 09:09 AM
Hi there

im attempting to do rollovers but for some reason im not having much success!

here is my code

CODE
<style>
.profileWidth table { margin-bottom:760px; width:800px; }
.rail { display:none; }
.gap {
background: top left no-repeat;
width:800px; height:800px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -800px;
</style>

<div class="gap"></div>

<style>

.orangetext15 {display: none;}
.whitetext12 {display: none;}


table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color: 000000;
background-image:url(http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yardarm2.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Lucida Grande;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Lucida Grande;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Lucida Grande;
}

a {
color: FFFFFF !important;
font-family: Lucida Grande !important;
}

a:hover {
color: 666666 !important;
font-family: Lucida Grande !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Lucida Grande;
}

table table table table, div table table table{
border-style:none;
}

</style>


<style>
.latestBlogEntry {
position:absolute;
top:1273px;
margin-left: -395px;
left:50%;
width: 325px;
background-color: transparent;
z-index: 9;
}

table .latestBlogEntry {
width:325px!important;
}
</style>


<style>
.friendSpace .orangetext15 {height: 45px !important; width: 850px !important; display: block !important; position: relative; top: 0px; left: 7px; padding: 0 !important; font-size: 0px; overflow: hidden; background-image: url(http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yafrlong.jpg); background-repeat: no-repeat; color: 747f88 !important; line-height: 50px !important;}
.friendSpace {position:relative; margin-left:-352px; float:left;}
.friendSpace table, .friendSpace td.text {width:100%;}



html body.bodyContent table tbody tr td table.friendsComments {
width: 720px !important;
margin: 0 !important;
padding: 0 !important;
margin-top: 20px !important;
overflow: hidden !important;
background-color: transparent !important;
margin-left: -1px !important;
_width: 720px !important;
_margin-left: -12px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0px 0px !important;
background-color: transparent !important;
height: auto !important;}

table.friendsComments tbody tr td.text table tbody tr td {
background-color: transparent !important;
height: auto !important;}

table.friendsComments tbody tr td.text table tbody tr td span.orangetext15 {
background-image: ;
background-repeat: no-repeat !important;
background-color: transparent;
display: block !important;
height: 45px !important;
color: 000000 !important;
width: 866px; position: relative;
overflow: hidden;
font-size: 0px;
text-align: right;
position: relative;
top: 2px;
left: -18px;
line-height: 300px !important;
_width: 856px !important;
_border-left: 1px 000000 !important;
_border-right: 1px 000000 !important;
_height: 40px !important;
}


html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b {
display: block;
position: absolute;
z-index: 9;
width:720px;
height: 15px;
line-height: 15px;
overflow: hidden;
margin: -25px 0 0 8px;
text-align: right;
padding-right: 12px !important;
color: 000000;
font-weight: normal;
font-size: 12px;
_margin: 0px 0 0 15px;
_font-size: 12px !important;
_color: ffffff;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b span.redtext {
font-weight: normal;
color: 666666;
padding: 0px 2px;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b a {
color: 666666 !important;
font-size: 12px !important;
text-transform: none;
margin: 0 -7px 0 -8px !important;
padding: 0 9px 0 9px !important;
background-color: transparent !important;
position: relative !important;
display: inline !important;
z-index: 9;
border: none !important;
letter-spacing: 0px !important;
_font-size: 11px !important;
_margin: 0 !important;
_padding: 0 !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table {
overflow: hidden !important;
border: 1px 000000 !important;
border-color: 000000 !important;
width: 100% !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td {
background-color: transparent !important;
text-align: left;
vertical-align: top;
overflow: hidden !important;
font-size: 12px !important;
line-height: 12px !important;
text-transform: none !important;
letter-spacing: 0px;
color: ffffff !important;
margin: 0 !important;
padding: 5px 0px 5px 0px;
border-bottom: 1px solid ! important;
border-color: 91a093 !important;
_line-height: 10px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10 {
color: 91a093 !important;
text-transform: None !important;
margin: 0px !important;
padding: 0px important;
display: block !important;
font-size: 12px;
font-family: Lucida Grande !important;
font-weight: normal;
letter-spacing: 1px;
text-align: right;
margin: 10px 10px -12px 0px !important;
width: 650px;
border-top: 1px 000000;
_margin: 12px 0px -.5em 0px !important;
_width: 650px;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td {
background-color: transparent !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td a {
display: block;
border: 0px 000000 !important;
border-color: 000000 !important;
border-top-style: solid !important;
border-top-width: 0px !important;
text-align: center;
text-transform: Uppercase;
padding: 8px;
font-size: 12px;
letter-spacing: 1px;
color: transparent !important;
position: relative !important;
margin-top: -3px !important;
background-color: transparent;
_margin-top: -6px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a {
display: block !important;
color: 91a093 !important;
margin: 0px !important;
padding: 10px 10px 0px 10px !important;
text-transform: none !important;
margin-bottom: -15px !important;
font-size: 12px !important;
line-height: 11px !important;
border: none !important;
letter-spacing: 0px !important;
text-align: center !important;
width: 110px !important;
overflow: hidden !important;
font-weight: normal;
_width: 124px !important;
_margin-bottom: -15px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a img {
visibility: visible !important;
border: 0px 008080 !important;
border-color: 000000 !important;
padding: 0px !important;
margin: 0px !important;
margin-top: -12px !important;
width: auto !important;
_margin-left: 0px;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img.ImgOnlineNow {
display: block;
position: relative;
margin: 15px 0 -20px 26px !important;
border: none !important;
_margin: 15px 0 -20px 21px !important;}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img {
max-width: 100%;
margin: 0px !important;
margin: 0px 0px 12px 0px !important;}

table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 10px;
text-indent: -999999px;
background: transparent bottom left no-repeat;
}

table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 50px;
text-indent: -999999px;
background: transparent bottom left no-repeat;
}

.topbanner {position:absolute; left:50%; top:144px; margin-left:-400px; _margin-left:-400px; width:800px; height:800px; z-index:1;}

.topbannerhover {position:absolute; left:50%; top:916px; _top:921px; margin-left:-400px; _margin-left:-400px; width:800px; height:50px; z-index:1;}

div.topbanner1 a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 800px;
height: 50px;
z-index:1;
}

.topbanner1 {position:absolute; left:50%; top:916px; _top:921px; margin-left:-400px; _margin-left:-400px; width:800px; height:50px; z-index:1;}

.playerbk {position:absolute; left:50%; top:997px; margin-left:-222px; _margin-left:-223px; width:496px; height:380px; z-index:-1;}

.blog {position:absolute; left:50%; top:980px; _top:983px; margin-left:-398px; _margin-left:-398px; width:325px; height:45px; z-index:1;}

.tw {position:absolute; left:50%; top:1209px; _top:1221px; margin-left:-398px; _margin-left:-398px; width:320px; height:45px; z-index:1;}

.tw2 {position:absolute; left:50%; top:1283px; _top:1295px; margin-left:-398px; _margin-left:-398px; width:190px; height:250px; z-index:1;}

.mi {position:absolute; left:50%; top:1563px; _top:1575px; margin-left:-398px; _margin-left:-398px; width:320px; height:45px; z-index:1;}

.showsheader {position:absolute; left:50%; top:1500px; _top:1235px; margin-left:-398px; _margin-left:-398px; width:325px; height:45px; z-index:1;}

.logo {position:absolute; left:50%; top:730px; margin-left:-475px; _margin-left:-475px; width:900px; height:231px; z-index:1;}



</style>


<div class="topbanner">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yardmanew.jpg" /></div>

<div class="logo"><img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/icelogo.png" />
</div>

<div class="playerbk">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/playerbackground.jpg" /></div>

<div class="showsheader">
Image code here
</div>

<div class="topbannerhover">
<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_01.jpg" width="8" height="50" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD01MDYxNjI1OTQ=">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_02.jpg" width="101" height="50" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_03.jpg" width="39" height="50" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTUwNjE2MjU5NA==">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_04.jpg" width="199" height="50" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_05.jpg" width="30" height="50" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTUwNjE2MjU5NA==">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_06.jpg" width="249" height="50" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_07.jpg" width="27" height="50" alt="" /></td>
<td>
<a href="mailto:yardarmstudio@btinternet.com">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_08.jpg" width="133" height="50" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersicerollover_09.jpg" width="14" height="50" alt="" /></td>
</tr>
</table>
</div>

<div class="topbanner1">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice1.jpg" />
</div>


<style>
table table table {visibility:hidden;}
td.text table {visibility:visible;}
</style>


Any help would be great
Mickey
Jan 2 2010, 04:29 AM
Can you post a link to your page?
dollywood
Jan 2 2010, 05:04 AM
Hi Mike

Sure its www.myspace.com/tgvisualsbands
dollywood
Jan 2 2010, 01:23 PM
Hi there

Thanks for the code the rollovers work but i wanted them to go from white to blue on rollover not the other way round - i swapped the codes but it doesnt seem to work?

sorry to be thick!
Mickey
Jan 2 2010, 01:32 PM
Since the white links are on one image, you will have to slice it up into parts like the blue ones and turn the blue links into one image like the white ones. Then, replace the URLs of the image links appropriately.
dollywood
Jan 2 2010, 02:50 PM
hi mike

thanks for your help its working now!

you can go ahead and close topic now

thanks
manny-the-dino
Jan 2 2010, 03:06 PM
Topic Closed and Moved
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.