CSS Rollovers - Can't do it i'm a failure!

[J]

Lol, i'm trying to follow eileens tut but as what i want to do is a tad more advanced i'm hoping someone here can help me.

I have a banner at the top of myspace contained within a div called "topbanner" here is the css controlling it.

Code:

<style>
body{
background-position:top center;margin-top: 810;}
div.topbanner {
top: 0;
left: 50%;
margin-left: -400px;
_margin-left: -399px;
text-align:center;
position: absolute;
}
</style>

Inside the div I have sliced up an image which has links along the bottom, would anyone be willing to help me sort out the code to make some rollovers for these links?

If someone feels like helping give me a shout and i can provide all the images and rollovers etc.

TIA

[Eileen]

Do you want a tutorial on css rollovers?

I really don't feel like reading through and sorting out code, but this may help:

http://views-under-construction.blogspot.com/2007/01/css-mouseover-popup-hover-myspace.html

[J]

Hi Eileen,
Yeh it was that tutorial i was following, works great but I run into trouble when i try to implement into code i'm already using.
The way i work is to create an image in photoshop for the top banner which cotains links along the bottom (home, add to friends, send message etc.)
That image is then sliced up and the code outputted as HTML.
I then put the HTML table into a div postioned at the top of the page, bit strange i know putting a table inside a Div but it works well for MySpace so why not.

Code:

<style>
body{
background-position:top center;margin-top: 810;}
div.topbanner {
top: 0;
left: 50%;
margin-left: -400px;
_margin-left: -399px;
text-align:center;
position: absolute;
}
</style>

What i don't know how to do, is implement the rollovers on the seperate image links i sliced up, contained within the table.
I'd even pay someone to write the code for me, if you can do it and it works. name a price and we'll see what we can do.
Thanks

[J]

I need my rollovers to be all under each other, how do i modify eileens code to do that? here's what i'm using...

Code:

<div class="1x">
<a class="img1" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img src="1x.jpg"</a>
<a class="img2" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img  src="1xhov.jpg"></a>
</div>

<div class="YouTube">
<a class="img1" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img src="youtube.jpg"</a>
<a class="img2" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img  src="youtubehov.jpg"></a>
</div>

<style>
a:hover img {filter:none;}
div.1x {position:relative; top:0px; width:290px; height:118px; border:0px;}
a.img2 {position:absolute; top:0px; left:0px;}
a.img1 {position:absolute; top:0px; left:0px;}

a:hover img {filter:none;}
div.1x {position:relative; top:0px; width:290px; height:118px; border:0px;}
a.img1 {position:absolute; top:0px; left:0px;}
a.img2 {position:absolute; top:0px; left:0px;}

a:hover img {filter:none;}
div.YouTube {position:relative; top:0px; width:290px; height:118px; border:0px;}
a.img2 {position:absolute; top:0px; left:0px;}
a.img1 {position:absolute; top:0px; left:0px;}

a:hover img {filter:none;}
div.YouTube {position:relative; top:0px; width:290px; height:118px; border:0px;}
a.img1 {position:absolute; top:0px; left:0px;}
a.img2 {position:absolute; top:0px; left:0px;}




a.img1:hover img{visibility:hidden;}
a.img2 img {visibility:hidden;}
a.img2:hover img {visibility:visible;}
</style>

[J]

Anyoneeeeeee? basically need a list containing 5 different rollovers...

[Ben]

yeah, i do the same, i know how you feel...

post me the code from the html output off photoshop and when i've got 10 mins ill try to show you how to jam the links in...

sometimes screws up on firefox though... ill try sort that out...

cherers