Log In · Register

 
Rollover question, I think I'm almost there...hopefully
shynomi
post Apr 18 2010, 12:35 AM
Post #1


Senior Member
****

Group: Member
Posts: 123
Joined: Nov 2008
Member No: 698,881



Ok, I've looked through a ton of resolved topics on this and the main band tutorial as well but I'm missing something.

I had found this tutorial that made it look the easiest so far for rollovers.
http://www.createblog.com/html_css-scripts...image-rollover/

I've got sliced images for my main header but have no clue where the rollover codes go,
in about me section where the rest of the codes are? or is there a certain area they need to go in?
I want to simply have rollovers on the contact links (send message, add to friends etc..)
on my page: http://www.myspace.com/frucatestpage

I have tried this code:

CODE

<style type="text/css">
a.SENDMESSAGE
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-1.jpg)repeat;width:336px;height:44px;display:block;}

a.SENDMESSAGE:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-2.jpg)repeat;}
</style>


That is for the send message link, I read where I have to use a transparent gif now in the original sliced link. That I don't get.

Here's the code for the sliced images in the main header, you'll see i have the class SENDMESSAGE in the link.

CODE

<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTQ4MjUxNjU4OA==" class="SENDMESSAGE">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-1.jpg" width="336" height="44" border="0" alt="" /></a></td>



Am I on the right track?
Sorry so long, just wanted to give every bit of info i could.





 
 
Start new topic
Replies
shynomi
post Apr 18 2010, 11:03 PM
Post #2


Senior Member
****

Group: Member
Posts: 123
Joined: Nov 2008
Member No: 698,881



Did the trick for FF and Safari :)
Now the issue is IE, there's only a blank box there. No links showing up.

I posted the entire code here below.
I have the rollover codes in the members section. The rest of the code is in the bio section.


CODE


<style>
.profileWidth {
padding-bottom:1299px !important;}
</style>


<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-347px; _margin-left:-343px; top: 0px; background-color:COLOR; background-image: ; background-repeat: no-repeat; background-position: bottom center; width:824px; height:1508px; overflow:no;}">


<table id="Table_01" width="824" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_01-1.jpg" width="824" height="175" alt="" /></td>
</tr>

<tr>
<td colspan="2">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_02-1.jpg" width="824" height="505" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_03-2.jpg" width="824" height="446" alt="" /></td>
</tr>
<tr>

<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTQ4MjUxNjU4OA==" class="SENDMESSAGE">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_05-1.jpg" width="488" height="44" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD00ODI1MTY1ODg=" class="ADDTOFRIENDS">

</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_07-1.jpg" width="488" height="36" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=482516588" class="VIEWPICS">
</a></td>
<td>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_09-1.jpg" width="488" height="36" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuY29t
G9zZVYzJnM9UGxlYXNlK3Rha2UrYStsb29rK2F0K215K2ZyaWVuZCUyN3MrcHJvZmlsZSZiPUhlcmUlM
dzK2ErbGluayt0bytpdCUzYSUzY2JyKyUyZiUzZSUzY2EraHJlZiUzZCUyMmh0dHAlM2E" class="FORWARD">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_11-1.jpg" width="488" height="35" alt="" /></td>
</tr>

<tr>
<td>
<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.channel&contributorid=22508948" class="VIEWVIDEOS">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_13-1.jpg" width="488" height="39" alt="" /></td>
</tr>
<tr>
<td>

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9zYWludHNvZnZhbG9yeQ==" class="FACEBOOK" target="_blank">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_15-1.jpg" width="488" height="32" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnNvbmljYmlkcy5jb20vc2FpbnRzb2Z2YWxvcnk=" class="SONICBIDS" target="_blank">
</a></td>

<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_17-1.jpg" width="488" height="32" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTQ4MjUxNjU4OA==" class="COMMENTUS">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_19-1.jpg" width="488" height="31" alt="" /></td>

</tr>
<tr>
<td colspan="2">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_20.jpg" width="824" height="97" alt="" /></td>
</tr>
</table>


</div>




<style>
.tg_left {position:absolute; margin-top:-0px; margin-left:-404px; left:50%; top:1726px; width:315px; height:700px; background-color:transparent; z-index:2;}
</style>




<div class="tg_left">



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/infoline.jpg" /><br /><br />



<table width="300" border="0" cellspacing="3" cellpadding="3">

<tr>
<td><font size="1" face="Verdana">MEMBERS
</font>
</td>
<td>


<div align="right"><font size="1" face="Verdana">Gavin Jasper: Vocals/Bass<br />
Godfrey Thomson: Guitars<br />
Gerard Bouvier: Drums<br />
Steven Buckle: Keyboards</a>

</font>

</div>
</td>
</tr>


<tr>
<td>

<font size="1" face="Verdana">HOMETOWN</font>

</td>
<td>


<div align="right"><font size="1" face="Verdana">Atlanta, GA</font>


</div>
</td>
</tr>


<tr>
<td><font size="1" face="Verdana">GENRE</font>

</td>
<td>


<div align="right"><font size="1" face="Verdana">Rock / Indie / Pop</font>



</div>
</td>
</tr>


<tr>
<td><font size="1" face="Verdana">URL</font>

</td>
<td>


<div align="right"><font size="1" face="Verdana"><a href="http://www.myspace.com/saintsofvalory">www.myspace.com/saintsofvalory
</a></font>



</div>
</td>
</tr>


<tr>
<td><font size="1" face="Verdana">BAND EMAIL</font>

</td>
<td>


<div align="right"><font size="1" face="Verdana"><a href="mailto:saintsofvalory@gmail.com">saintsofvalory@gmail.com</a>
</font>


</div>
</td>
</tr>



<tr>
<td><font size="1" face="Verdana">SONICBIDS
</font>
</td>
<td>


<div align="right"><font size="1" face="Verdana"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnNvbmljYmlkcy5jb20vc2FpbnRzb2Z2YWxvcnk=">Click To Visit!</a>

</font>

</div>
</td>
</tr>

</table>




</div>


<style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: 9px; text-align:left;}</style>


<style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style>

<style>
.friendText {display:none}
.redLink {display:none}
</style>



<style>

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}


body{ font-size:x-small;
background-color:ffffff;
background-image:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/bg3.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;}


{THIS EDITS THE MAIN TEXT STYLE AND COLORS}body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{color:000000;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;}

{THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS}.orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:000000;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;}

{THIS CHANGES COLOR AND STYLE OF LINKS}a, 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:27374b;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;}

{THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER}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:000000;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;}

{THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE}{NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED}p {margin: 0px 0px 1em 0px; font-family: arial !important}body>div {margin-left: 0px;}table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}table table table td {background-color:transparent;margin:0px;padding: 0 0px 0px 0px}table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}table table table table td {padding:0px;margin:0px;}table table table { background-color: transparent; border: 0 solid; border-color: transparent; width: 100%; }object {position:relative; z-index:1;}body td table, body div table {margin-top: 0px;}.a {hide URL label}.a {hide top links}.a {unhide navigation bar}.navbar {visibility:visible;}

</style>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/spacerpic.png" /><br /><br />





<style>
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: 70px !important;
color: 000000!important;
width: 800px;
position: relative;
overflow: hidden;
font-size: 1px;
text-align: right;
margin-top: 10px;
line-height: 300px !important;
_width: 800px !important;
_border-left: 1px 000000!important;
_border-right: 1px 000000!important;
_height: 70px !important;
_margin-bottom: -1px !important;
}
</style>




<style>
.orangetext15{display:none}
</style>

<style>embed, object {position:absolute; top:1098px; left:50%; margin-left: -56px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>


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

<style>
.navbar, .subnavItems {display: none!important;}
</style>

<style>

.latestBlogEntry {
position:absolute;
top:1531px;
margin-left: -406px;
left:50%;
width: 345px;
background-color: transparent;
z-index: 9;
}

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

<style>
.i {display:none}
{! color top menu !}
div.profileWidth table td, i i i.x {background-color:transparent !important;}
{! color search area and behind ad different than top menu !}
div.profileWidth div {background-color:transparent !important}
{! color link font in top menu !}
div.profileWidth div ul li a {font-size:4px; color:000000 !important}
{! link hover color !}
div.profileWidth div ul li a:hover {color:EAE7E2 !important; background-color:transparent !important; display:block}
{! remove shadow in google search area !}
div.profileWidth div.clearfix, .i i i {background-image:none !important;}
.i {display:none;}
div.profileWidth table td ul small,
div.clearfix i i i {color:950401 !important}
</style>



</td></tr></table>
</td></tr></table>
</td></tr></table>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/friendsandcommentsline.jpg" style="position: relative; left: -10px;" /><br /><br /><br />

<div class="myDClassFC">
<table><tr><td>
<table class="off"><tr><td>
<table><tr><td>

<style>
.i {display:none;}
div.myDClassFC {height:400px !important; width: 785px!important; overflow-x:hidden !important}
</style>


<style>
a.SENDMESSAGE
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-1.jpg)repeat;width:336px;height:44px;display:block;}

a.SENDMESSAGE:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_04-2.jpg)repeat;}
</style>

<style>
a.ADDTOFRIENDS
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_06-1.jpg)repeat;width:336px;height:36px;display:block;}

a.ADDTOFRIENDS:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_06-2.jpg)repeat;}
</style>

<style>
a.VIEWPICS
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_08-1.jpg)repeat;width:336px;height:36px;display:block;}

a.VIEWPICS:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_08-2.jpg)repeat;}
</style>

<style>
a.FORWARD
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_10-1.jpg)repeat;width:336px;height:35px;display:block;}

a.FORWARD:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_10-2.jpg)repeat;}
</style>

<style>
a.VIEWVIDEOS
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_12-1.jpg)repeat;width:336px;height:39px;display:block;}

a.VIEWVIDEOS:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_12-2.jpg)repeat;}
</style>

<style>
a.FACEBOOK
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_14-1.jpg)repeat;width:336px;height:32px;display:block;}

a.FACEBOOK:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_14-2.jpg)repeat;}
</style>

<style>
a.SONICBIDS
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_16-1.jpg)repeat;width:336px;height:32px;display:block;}

a.SONICBIDS:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_16-2.jpg)repeat;}
</style>

<style>
a.COMMENTUS
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_18-1.jpg)repeat;width:336px;height:31px;display:block;}

a.COMMENTUS:hover
{float:left;background:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SAINTS%20OF%20VALORY/justheader_18-3.jpg)repeat;}
</style>



Is there something i can add to make it show in IE?
 

Posts in this topic


Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: