Image Hover/Twitter Rows In Top Banners [Band MySpaces] Options

[CameronVainglory]

Hey guys, I've looked everywhere for how to create a row of twitter boxes in a top banner like alotta the bands on MySpace have.

Example: http://www.myspace.com/hitthelights

Also, I can't figure out how to create a row of linked image hovers, like the navigation at the top of this MySpace: http://www.myspace.com/askylitdrive

Any and all help is majorly appreciated :]

[fixtatik]

^ you can make rollovers 10x easier than that.

the CSS:

CODE

.navigation { NAVIGATION PROPERTIES }
.navigation a { display:block; float:left; height:##px; text-indent:-999em; }
.navigation a:hover { background-position:bottom; }

.link-1 { background-image:url(IMAGE FOR 1ST LINK); width:##px; }
.link-2 { background-image:url(IMAGE FOR 2ND LINK); width:##px; }
.link-3 { background-image:url(IMAGE FOR 3RD LINK); width:##px; }

the HTML:

CODE

<div class="navigation">
  <a class="link-1" href="URL">LINK 1</a>
  <a class="link-2" href="URL">LINK 2</a>
  <a class="link-3" href="URL">LINK 3</a>
</div>

instead of making two images, make only one. put the image you want for normal links on the top half, and the image you want for hovers on the bottom half. for .navigation a { height:##px; } the height will be half the height of the image. for the widths, just put in the width in pixels.

[CameronVainglory]

I'm not all that familiar with div codes :/

and fixtatik, I'm confused as to where to put each image url.

[fixtatik]

put the URL for images where it says "image for 1st link," "image for 2nd link," etc. if you need more, just follow the same form.

[CameronVainglory]

oh, I get that. but how does that create a rollover if there's only one image?

[fixtatik]

the one image is both the normal image and the image you want people to see when they hover over the link. make the one image twice the height as the normal/hover images, then put the normal one on the top half and the hover one on the bottom half.

.navigation a:hover { background-position:bottom; } tells the browser that when a visitor hovers over one of the links, it's to move the image to the bottom one.

take these for example:


normal links will be the top half, and when a visitor hovers over the link, they'll see the bottom half.

[CameronVainglory]

oh, okay. I think I got it. Thanks. I'll try it out :)

[CameronVainglory]

Well, I tried it and thought it was sure to work, but I ended up with this: http://i43.tinypic.com/2dv7xi0.jpg

The rollover part works, but I'm puzzled as to how it came out this way. The images are in the wrong order and one of them's completely missing.

For the top banner, I used this code: http://www.createblog.com/myspace-scripts/...ath-navigation/

I wasn't sure where to put my rollover images since they're in a div class and so are the sliced top banner images, so I put the navigation div class in the top banner div class, which I think may be my problem.

Any ideas?