New picture when hovering over pictures? Options

[OMGitsQuinton]

Okay, www.myspace.com/omgitsquinton this is my profile. I was wondering instead of having a flip effect if there was someway for all of my images to have like a different image on it when I hover over.. like say for one of my friends pictures to change to another picture of them when I hover over it.. and hopefully without it effecting the text hover..

Thank you, and I've seen this done on somebody's profile before, but I don't know the code.

[coldtrance]

roll overs:
http://forum.myspace.com/index.cfm?fuseact...oupID=100636674

[OMGitsQuinton]

Alright.. um I really don't understand all of that coding.. I guess I insert links and stuff? IDK.. but I was looking at it, and I'm really confused as to what codes I should use for my display picture, and what codes I should use for my friends.. Please help distinguishing that to me.. thank you..

[freeflow]

You can't do that for your friends without making a custom friendslist.

[Pulchritude]

hmm let me try to explain as detailed as I can.
Like toya said you have to make your own custom friend's list.

First you gotta make an image on photoshop or ms paint and make the width 100 and the heigh 200 like the one showed in the tutorial.

Then upload your image on ImageShack

Then second you got to start off with the style of your picture links.

CODE

<style type="text/css">
.friend{height: 100px; width: 100px; text-indent: 15px; overflow: hidden; background: url(http://c.myspace.com/Groups/00005/26/66/5986662_l.jpg) top left no-repeat; display: block;}
.friend:hover{background-position: bottom left;}
</style>

You start off with a class. The class of this code is .friend, you can see it in .friend and .friend:hover

Now leave the height and width alone in the code. Take the url code of the image you upload at imageshack and paste it in where it says this

CODE

(http://c.myspace.com/Groups/00005/26/66/5986662_l.jpg)

So just leave everything else alone.
Then go on to the actual link

CODE

<a href="link_2_friends_profile" class="friend">Friends Name</a>

Take your friend's myspace link and paste it in where it says

CODE

"link_2_friends_profile"

Then type your friends name where it says Friends Name and I would like to point out the class where it says class="friend" like in the style code.

So for every picture/link you do you got to make a new class for example

CODE

<style type="text/css">
.fried{height: 100px; width: 100px; text-indent: 15px; overflow: hidden; background: url(http://c.myspace.com/Groups/00005/26/66/5986662_l.jpg) top left no-repeat; display: block;}
.fried:hover{background-position: bottom left;}
</style>

See how I changed .friend to Fried (you can use any name you want). So then you also gotta do it for the link

CODE

<a href="link_2_friends_profile" class="friend">Friends Name</a>

change

CODE

class="friend"

to fried and add your second friend's myspace link and name.

and place all the

CODE

<a href="link_2_friends_profile" class="friend">Friends Name</a>

in where you want your friend's lsit to show up.

Well I hope I made it more detailed. I'm also new to roll overs so anyone go ahead and correct me if I'm wrong

[OMGitsQuinton]

So.. the pictures have to be 100 x 200.. or whatever it is.. ?

And also.. do I not have a custom friends list? I used a tutorial as the basis, but I've changed it around a lot.

[coldtrance]

you can use any size images you want, they just all have to be the same size as the ones they are "rolling over" from. and you would need to change the images in the custom top 8 to the ones with the roll overs

edit:
let me explain that better..

your friends pictures can be any size you want them to be, (ex: 79px wide by 110px high), but you need to "stack" the two images on top of each other in your image editing program... like the image posted above. so say you have two images that are 79x110, your final image that you host will be 79x220