how to make these rollover with out the weird background with white lines Options

[msdazzlebackgrou...]

please don't refer me to another tutorial link as i have tried them.

i am trying to create rollovers for my layout not the dark blue ones, but the ones toward the top. i have tried so many hours, it seems that i don't want any lines for the link image or rollover, for example, when i save it as transparent, i get these ugly white lines that distort them. please anyone have a tutorial, a video tutorial that explains in detail how i would go about making rollovers for these so when you rollover, the buttons would pop up some?? here are some rollovers i tried to make







,

CODE

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a href="http://www.createblog.com/layouts/index.php?layout=myspace_layouts" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a href="http://www.createblog.com/layouts/index.php?layout=myspace_layouts" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a <style type="text/css">
.commentlinks {display:none;}
body div table td form img{display:none!important;}
td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink,
td.text td.text span.btext
{display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
td.text td.text table td {font-size:0pt;}
td.text td.text {height:0;}
td.text td.text table b, td.text td.text table table td {text-transform: uppercase; letter-spacing:2px; line-height: 9px;

font-family: small fonts; font-size: 7px; color: 8a8a8a;}
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redtext,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
td td embed, td td object { position: absolute; top: -500px; left: -500px; }
td td td embed, td td td object { position: static !important; }
body div table td form option{display:none;}
body div table td form select{display:none;}
body div table td form input{display:none;}


body {
overflow: auto;
overflow-x: hidden;
scrollbar-face-color:6a3495;
scrollbar-arrow-color:0824c2;
scrollbar-highlight-color:6a3495;
scrollbar-shadow-color:6a3495;
scrollbar-3dlight-color:6a3495;
scrollbar-darkshadow-color:6a3495;
scrollbar-track-color:0824c2;
background-color:202020;
background-image:url(http://i216.photobucket.com/albums/cc191/atord1987/backgroundblah.png);
background-position:Center Center;
background-attachment:scroll;
background-repeat: repeat-xy
cursor:crosshair;
font-weight:normal;
}

a:link, a:visited, a:active {
font-family:book antiqua;
font-size:14px;
font-weight:normal;
color: ffffff;
text-decoration:none;
text-transform:none;
}

a:hover {
font-family:book antiqua;
font-size:14px;
font-weight:normal;
color:cd0b1e;
text-decoration:underline;
text-transform:none;
}

div.image
{position:absolute;
margin-left:-506px;
left:50%;
top:85px;
width:1024px;
height:1024px;}

div.aboutme
{position:absolute;
margin-left:20px;
left:50%;
top:600px;
width:400px;
height:180px;}

.aboutme {
position:absolute;
overflow:auto;
background-color:transparent;
font-family:book antiqua;
font-size:14px;
color:000000;
align:center;
font-weight:normal;
text-transform: lowercase;
margin:0;
padding:0;
}

.music{
position: absolute;
text-align: right;
border: 0px solid white;
overflow: scroll;
z-index: 3;
}

div.commentbox
{position:absolute;
margin-left:50px;
left:50%;
top:800px;
width:374px;
height:20px;}

a.nav {
display: block;
position: absolute;
top: 500px; left: 50%;
height: 44px;
margin-left:400px;
background-position: top left;
background-repeat: no-repeat;
border: 0px;
text-decoration: none;
}
a.nav:hover {
background-position: bottom left;
}
a img {
border: 0px;
}
a, a:link, a:visited, a:active, a:hover {
color: 36678D;
font-size: 7pt !important;
font-weight: bold !important;
font-family: 'Tahoma', sans-serif !important;
text-decoration: none;
}
a:hover {
color: white;

</style>

<div class="image">
<img src="http://i216.photobucket.com/albums/cc191/atord1987/background-3.png" width="1024" height="1024" border="0">
</div>

<div class="music" style="position: absolute; left:614px; top:945px; width:350px; height:100px; overflow: auto;">

<p style="visibility:visible;"><embed src="http://assets.myflashfetish.com/swf/mp3/minime.swf" quality="high"

wmode="transparent"

flashvars="myid=10216052&path=2008/06/12&mycolor=08B5CC&mycolor2=0FA0BA&mycolor3=000000&autoplay=true&rand=0&f=3&vol=100&pat=

0" width="160" height="68" name="myflashfetish" align="middle"type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/><br>
</object>
</div>

<div class="aboutme">

<style>replace the picture url with your own!</style>
<img src="http://cbimg9.com/layouts/08/06/28173ac.jpg" align=left>

<br><big><b><i><center>
This is your layout preview...
</b></big></i><br><br></center>

Name: Your name here.<br>
Age: How old are you?<br>
Birthday: When is your birthday<br><br>
Write anything you want.<br><br>
<a href="http://www.createblog.com">This is how your link would look like.</a><br><br>

<i>"Your Favorite Quote Goes Here"</i>


<br><br><br><br><br><br><br>


<b>About Me:</b><br>
I look __ to the night sky
And I feel you are near
You linger __ beside me __ my love

in moon rising
and I dare

To listen to my heart
And desires that are there
In the silence and shadows __ feel you near
in love

I gaze to the full moon rising
As gently __ you appear
Then sink, into depths __ of loving eyes
Then I __ hold you so close
And the magic of dreamer’s touch
is alive now to feel
Your love __ in one breathless kiss
I’m alive

One night to meet
On the shores of one true love
Is more than my heart could ever dream
I’m in love

Strength of the vortex
Drags me down to the ground
But I am saved once again once again
touched by your love

Spiraling in our love now
We cling to our time
And the moment that was yours and mine
still shines

One night to meet
On the shores of one true love
Is more than my heart could ever dream
I’m in love I’m alive

And my heart cries out __ please please
still let the dreamer dream?
But I’m alone once again __ in the dawn
sun rises

and the moon waits no more
As the day must begin

Mystical night of moon rising
Bring him to me once again
Spread your moon dust so softly upon my eyes
To see him now

And I pray for the moon
And the dark of the night
When moon rises once again in my eyes in my eyes
And the stars light his path
To lead him to my door
And then we’ll be singing in love once more once more once more


So till the next time love
I’ll wait in moonlight’s wake
Of the stars and the moon __ __ of each long lonely night

To caress you and let the stardust
Fill my eyes in your love
I’ll gaze to the full moon rising till then till then till then love <br><br><br>

<b>Who I'd Like to Meet:</b><br>
WRITE ABOUT IT HERE!<br><br><br>

</div>
<div class="sidebar">
<h1>otherstuff</h1>
intrests or whatever you want to put
</div>


<div class="nav">
<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="nav" style="margin-left: -302px; top: 173px; width: 91px; height: 93px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/homequestion.png')"> </a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXX" class="nav" style="margin-left: 420px; top: 590px; width: 104px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/link2-1.gif')"> </a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="nav" style="margin-left: 425px; top: 635; width: 66px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/link3.gif')"> </a>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXXX" class="nav" style="margin-left: 420px;; top: 670; width: 85px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/link4.gif')"> </a>
<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=XXXXXXXX" class="nav" style="margin-left: 420px; top; 700px; width: 65px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/link5-1.gif')"> </a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXX" class="nav" style="margin-left: 420px; top: 720px; width: 99px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/link6-1.gif')"> </a>
<a href="http://www.msdazzlebackgrounds.com" class="nav" style="margin-left: 420px; top: 750px; width: 81px; background-image: url('http://i216.photobucket.com/albums/cc191/atord1987/link7.gif')"> </a>
</div>

<div class="commentbox">
<center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="XXXXXXXX" type="hidden"/>
<textarea name="f_comments" class="msdazzlebackgrounds">Shine With Me Forever..</textarea><br/>

<input type="submit" class="msdazzlebackgrounds" value="Love Me!"/>
<input type="reset" class="msdazzlebackgrounds" value="Oops!"/></form>
<style>
textarea.msdazzlebackgrounds {
background-image:url("");
background-color:transparent!important;
background-repeat: no-repeat;
background-position: bottom-left;
width:374px !important;
height:40px !important;
font-family:book antiqua!important;
color:000000!important;
line-height:17px !important;
font-size:12px !important;
border-color:000000 !important;
border-style:solid !important;
border-width:0px !important;
letter-spacing:1px !important;
text-transform: lowercase;
font-weight:none !important;
}

input.msdazzlebackgrounds {color:000000!important;
font-size:9px !important;
width:60px !important;
height:15px !important;
font-family:book antiqua!important;
background-color: transparent!important;
border-color:000000 !important;
border-width:0px !important;
border-style:solid !important;
letter-spacing:0px !important;
text-transform:lowercase !important;
line-height:11px !important;
font-weight:normal !important;}
</style></div>

[msdazzlebackgrou...]

i already know that, but i want to know how can i do it so that i don't have to put a background in there, because when i make the background transparent, it shoes white lines around the edges of the buttons and i don't want them there.

[msdazzlebackgrou...]

how would i turn the image in this layout with the buttons into rollovers that pop up?

[karmakiller]

Rollovers don't have to be complicated. If you don't want to save them as two separate images you can even use the same image.

Have you tried this script? The easiest way to do rollovers is to use two images, so split them up into the image that you want displayed and a second image that you want displayed when the mouse is placed over it. In that script, changed the height and width so that it is equal to the image that you're linking and you shouldn't get any weird white lines.

[msdazzlebackgrou...]

to karma killer, here is what i have to try it out, it doesn't show up

CODE

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a href="http://www.createblog.com/layouts/index.php?layout=myspace_layouts" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a href="http://www.createblog.com/layouts/index.php?layout=myspace_layouts" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><p><a <style type="text/css">
.commentlinks {display:none;}
body div table td form img{display:none!important;}
td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink,
td.text td.text span.btext
{display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
td.text td.text table td {font-size:0pt;}
td.text td.text {height:0;}
td.text td.text table b, td.text td.text table table td {text-transform: uppercase; letter-spacing:2px; line-height: 9px;

font-family: small fonts; font-size: 7px; color: 8a8a8a;}
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redtext,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
td td embed, td td object { position: absolute; top: -500px; left: -500px; }
td td td embed, td td td object { position: static !important; }
body div table td form option{display:none;}
body div table td form select{display:none;}
body div table td form input{display:none;}


body {
overflow: auto;
overflow-x: hidden;
scrollbar-face-color:2425781;
scrollbar-arrow-color:B50325;
scrollbar-highlight-color:2425781;
scrollbar-shadow-color:2425781;
scrollbar-3dlight-color:2425781;
scrollbar-darkshadow-color:2425781;
scrollbar-track-color:2425781;
background-color:F7CE8C;
background-image:url('');
background-position:Center Center;
background-attachment:scroll;
background-repeat: repeat-xy;
cursor:crosshair;
font-weight:normal;
}

a:link, a:visited, a:active {
font-family:book antiqua;
font-size:14px;
font-weight:normal;
color: ffffff;
text-decoration:none;
text-transform:none;
}

a:hover {
font-family:book antiqua;
font-size:14px;
font-weight:normal;
color:none;
text-decoration:underline;
text-transform:none;
}

div.image
{position:absolute;
margin-left:-440px;
left:50%;
top:237px;
width:1024px;
height:1024px;}

div.aboutme
{position:absolute;
margin-left:-210px;
left:50%;
top:500px;
width:420px;
height:206px;}

.aboutme {
position:absolute;
overflow:scroll;
background-color:transparent;
font-family:book antiqua;
font-size:14px;
color:000000;
align:center;
font-weight:normal;
text-transform: lowercase;
}

.CLASS {display:block;width:93px;height:64px; top: 190px; margin-left: 120px;
background-image:url("http://i216.photobucket.com/albums/cc191/atord1987/2.png"); background-repeat:no-repeat;}

.CLASS:hover {display:block;width:93px;height:97px; top: 190px; margin-left: 120px; background-image:url("http://i216.photobucket.com/albums/cc191/atord1987/2hover.png"); background-repeat:no-repeat;}

</style>

<div class="image">
<img src="" width="873" height="726" border="0">
</div>


<div class="aboutme">
<style>replace the picture url with your own!</style>
<img src="http://cbimg9.com/layouts/08/06/28173ac.jpg" align=left>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

to mike, i know somewhat, but like you said the edges in my rollovers are straight compared to my background image. so i want to know how to do it (crop, select+copypaste), etc, or whatever so that they will be rollovers. for the script, i don't know where to place it, and how should i position it and where i should put the positioning in the script.

and do the hover and regular state can they e different sizes but still rollover correctly?

Reason for edit: Please use the Edit button instead of double-posting. - Mike

[allvanishing]

You would just need to change the top for the hover state a bit lower and the background position negatively so it would pop up.

[msdazzlebackgrou...]

can you give me the code for at least one link?

[Mickey]

Posts merged.

You aren't doing anything wrong with the rollovers. They worked fine for me. They just didn't blend into the layout. You need to make them part of the design before you start turning them into rollovers. That way, they don't look out of place.

[msdazzlebackgrou...]

Thanks.

[manny-the-dino]

Topic Closed and Moved