Rollover question, I think I'm almost there...hopefully |
Rollover question, I think I'm almost there...hopefully |
![]()
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. |
|
|
![]() |
![]()
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? |
|
|
![]() ![]() |