Custom Friend Rollover Effect

[size=24:88252c75f0][b:88252c75f0]Custom Friend Rollover Effect[/b:88252c75f0][/size:88252c75f0]
[u:88252c75f0]By: Luis Jacob Mendez[/u:88252c75f0]

Table of Contents
0. Introduction
1. Creating the DIV
2. Creating the Thumbnails
3. The Holder Image
4. Placing the Thumbnails
5. Hiding the Larger Images
6. Placing the Larger Images Upon Hover
7. Final Step: The HTML
0. Conclusion


[url=]Download the Full ZIP file here to get all contents of this tutorial and an example![/url]

If you want a full demo as to what this effect looks like, just take a look at my friend space at my Myspace. If ever I do update my layout (won’t be for quite a while), I’ll be sure to put a link to a different page here.

Now this rollover effect is a bit more unique than the casual rollovers that are out there; this rollover shows a different image at a different location when the hover takes place. So for this tutorial, we will create an effect that when a person hovers over a thumbnail of a friend, a bigger picture of that friend will show up at a different area. This not only saves space, but creates that “wow” effect that will leave your visitors impressed. Also, if you want, you can also include two rollover effects, although I don’t recommend it as it may make your page too ‘noisy’.

If you are new to a lot of these things, I recommend you leave the width and height of all the elements the same. This will ensure that everything works, and the only things you really have to change are the picture URLs. But if you are more advanced and want to customize the effect as much as possible, you can just follow my directions when changing the height, width, left, and top elements.

NOTE: For the first SIX steps, the code will be CSS and belongs inside of …

<style type="text/css">

So let’s get coding!

[u:88252c75f0][size=20:88252c75f0]Step One[/size:88252c75f0][/u:88252c75f0]

The first thing we will do is create the overall field of the friends list…we shall name the div “friendspace”. The important aspect of this step is that this where you choose to place the entire thing.

.friendspace a {
margin:270px 0 0 390px;

[b:88252c75f0]Margin[/b:88252c75f0]: Very Important! You have to change this to place your entire div correctly. The only two numbers you have to change are the Top field (270px in this example) and the Left field (390px in this example). The first one is how far down you want it to be from the top, and the last one is how far to the right you want it to be. Sounds very stupid according to the name, but trust me, it works!

[b:88252c75f0]Background-color[/b:88252c75f0]: This one doesn’t have to be here, but I put it there for safety. You can get rid of it if it doesn’t cause you any problems.

[u:88252c75f0][size=20:88252c75f0]Step Two[/size:88252c75f0][/u:88252c75f0]

Now, to start kicking things off smoothly, we will create our default first 8 friends.

[code:1:88252c75f0]a.friend1 {background:url(friend1.gif); position:absolute; display:block; width:77px; height:70px; text-decoration:none;}[/code:1:88252c75f0]

[b:88252c75f0]Background:url[/b:88252c75f0]: Inside of the parentheses is where you have to change the location of the image. This is of course for the small thumbnail.

Note: In my example I have it as just the name of the image because they are held in the same directory; you have no directories in Myspace so you will have to put the entire URL here (

[b:88252c75f0]Width/Height[/b:88252c75f0]: Change it to the corresponding aspects of your image.

Note: This is only for one friend, you have to repeat this step 7 more times, and be sure to keep changing the name of the a.class to friend2, friend3, etc and the background URL of where the other images are. I also like to leave this all crunched up together so it doesn’t take much room in the code.
Click here for a quick example of how I left it…

[u:88252c75f0][size=20:88252c75f0]Step Three[/size:88252c75f0][/u:88252c75f0]

We will now place and display the middle picture, the main picture that shows when nothing has hovered over the smaller images. This is also known as the holder image that basically “holds” a place for the bigger images to come once hovered.
a.holder {

[b:88252c75f0]Background:url[/b:88252c75f0]: Change to your corresponding URL.

[b:88252c75f0]Width/Height[/b:88252c75f0]: The width should typically be your width of the smaller images TIMES 4!
The height should be whatever you wanted it to be. Keep in mind, the smaller it is, the more widescreen your hover images are going to be.

[b:88252c75f0]Top[/b:88252c75f0]: This is far how down you want it to be from the first friend that’s to the top. Because the height of the thumbnail image of friend1 was only 70px for me, I made the holder image to be placed 70px down.

[b:88252c75f0]Left[/b:88252c75f0]: This is how far to the right you want the image to be. Since I did not have anything in the way, I left this at zero. This really shouldn’t be changed unless you have completely changed the layout of how this is supposed to look like.

[u:88252c75f0][size=20:88252c75f0]Step Four[/size:88252c75f0][/u:88252c75f0]

Next we have to give directions as to where the smaller thumbnails are going to be placed. This is very important if you changed the width/height of the thumbnails.

[code:1:88252c75f0]a.friend1 {top:0px; left:0px;}
a.friend2 {top:0px; left:77px;}
a.friend3 {top:0px; left:154px;}
a.friend4 {top:0px; left:231px;}

a.friend5 {top:200px; left:0px;}
a.friend6 {top:200px; left:77px;}
a.friend7 {top:200px; left:154px;}
a.friend8 {top:200px; left:231px;}
I divided this code into two sections, mainly to make things a bit easier for you to understand; the first part is for the first row of friends (the top 4), and the bottom half is the last group of friends (the last bottom 4). This is going to be a bit complicated to explain, so bare width me for a moment. I’ll start with the TOP element.

[b:88252c75f0]Top[/b:88252c75f0]: For the first four friends, you are going to leave the top at 0; this is to ensure that they are at the very top. For the last four friends, if you took a look at the example, you will see that they are placed right underneath the holder image. In order to do this, you must add both the height of the thumbnail AND the holder image. So in my example 70 (height of the thumbnail) + 130 (height of the holder) = 200 (where it will be placed).

[b:88252c75f0]Left[/b:88252c75f0]: Slightly less complicated; just leave the first friend in a group at zero, the second friend’s left element is just the width of the thumbnail, the third is the width TIMES two, and the fourth is the width TIMES 3. The same is repeated for the bottom group.

[u:88252c75f0][size=20:88252c75f0]Step Five[/size:88252c75f0][/u:88252c75f0]

Now, before we move on to the hover code, we have to make sure that the larger images won’t appear BEFORE the hover action.

[code:1:88252c75f0].friendspace a img {display:block; position:absolute; width:0px; height:0px; border:0px; top:0px; left:0px;} [/code:1:88252c75f0]

[b:88252c75f0].friendspace[/b:88252c75f0]: Make sure this is the same as the one in Step One!

[b:88252c75f0]Width/Height[/b:88252c75f0]: It is very important to leave this at zero so that they do not show anywhere without the hover effect.

[u:88252c75f0][size=20:88252c75f0]Step Six[/size:88252c75f0][/u:88252c75f0]

Almost done, hang in there! This code is basically the placement element for the bigger images once the hover takes place. If you left the width/height elements the same throughout the entire tutorial, then a simple copy and paste will do, but if you did, then be sure to change a lot of the top and left elements as they are very important! This is also the last of the CSS coding, so be sure to place your </style> after you are done with this step! Time to begin…

[code:1:88252c75f0]a.friend1:hover img {display:block; position:absolute; top:70px; left:0px; width:308px; height:130px; border:0px;}
a.friend2:hover img {display:block; position:absolute; top:70px; left:-77px; width:308px; height:130px; border:0px;}
a.friend3:hover img {display:block; position:absolute; top:70px; left:-154px; width:308px; height:130px; border:0px;}
a.friend4:hover img {display:block; position:absolute; top:70px; left:-231px; width:308px; height:130px; border:0px;}
a.friend5:hover img {display:block; position:absolute; top:-130px; left:0px; width:308px; height:130px; border:0px;}
a.friend6:hover img {display:block; position:absolute; top:-130px; left:-77px; width:308px; height:130px; border:0px;}
a.friend7:hover img {display:block; position:absolute; top:-130px; left:-154px; width:308px; height:130px; border:0px;}
a.friend8:hover img {display:block; position:absolute; top:-130px; left:-231px; width:308px; height:130px; border:0px;}[/code:1:88252c75f0]

[b:88252c75f0]Width/Height[/b:88252c75f0]: The width and height of the larger/holder images.

[b:88252c75f0]Top[/b:88252c75f0]: For the first group (top row/first four) it’s just the height of the thumbnails. For the last four, it is just the negative value of the height of your holder/larger image.

[b:88252c75f0]Left[/b:88252c75f0]: No explanation needed here, just copy the same left value from Step Four and make sure to make it Negative!

[u:88252c75f0][size=20:88252c75f0]Step Seven [/size:88252c75f0][/u:88252c75f0]

Time for some HTML! Technically all you have to do is change the link to that of your friend’s MySpace and change the image URL to that of where your larger image is being held.

[code:1:88252c75f0]<div class="friendspace">
<a class="holder" href=""></a>
<a class="friend1" href=""><img src="friend1_large.gif"></a>
<a class="friend2" href=""><img src=" friend2_large.gif "></a>
<a class="friend3" href=""><img src=" friend3_large.gif "></a>
<a class="friend4" href=""><img src=" friend4_large.gif "></a>
<a class="friend5" href=" "><img src=" friend5_large.gif "></a>
<a class="friend6" href=" "><img src=" friend6_large.gif "></a>
<a class="friend7" href=""><img src=" friend7_large.gif "></a>
<a class="friend8" href=""><img src="friend8_large.jpg"></a>
Another reminder, be sure to change the URL to that of your corresponding friends. will NOT take you to your friends page, you have to put the link of your firend’s page there. As for the code, be sure to put the link of the LARGE image you want to show.


Looks like we have reached the end of the tutorial. I would like to see some of the interesting things you guys come up with, I’m open to all forms of creativity! I hope you guys enjoyed this tutorial; and if you learned something new, even better! Be sure to drop by all criticism and questions down below, and let me know what you think of my page on the Rate Profile section.


© 2004-2018 All rights reserved.
MyGen v2.6 - 146294513 Unique Visitors
This page was created in 1.028 seconds
Privacy Policy

eXTReMe Tracker