Rollovers

Tutorial

Click on thumbnailed images to enlarge

I'm so sick of layouts not having rollovers. This is lengthy, so please bear with me.

Note- this tutorial is constantly being edited. i apologize if things are a little messy.

Let's start out with the coding.
This is coding from my most recent layout, and I will be using images from that layout.

of course, this is inbetween style tags.

.link1{z-index:5;line-height:10px;position: absolute;width:108px;height:31px;left:510;top:430}
.link2{z-index:5;line-height:10px;position: absolute;width:101px;height:29px;left:510;top:461}
.link3{z-index:5;line-height:10px;position: absolute;width:128px;height:23px;left:490;top:490}
.link4{z-index:5;line-height:10px;position: absolute;width:120px;height:24px;left:482;top:513}
.link5{z-index:5;line-height:10px;position: absolute;width:98px;height:29px;left:488;top:537}

.name1{height: 31px; width: 108px; overflow: hidden; background:
url(http://cbimg6.com/tutorials/08/02/12/1019ae.png) top left no-repeat;
display: block;}
.name1:hover{background-position: bottom left;}
.name2{height: 29px; width: 101px; overflow: hidden; background:
url(http://cbimg6.com/tutorials/08/02/12/1019af.png) top left no-repeat;
display: block;}
.name2:hover{background-position: bottom left;}
.name3{height:23px; width: 128px; overflow: hidden; background:
url(http://cbimg6.com/tutorials/08/02/12/1019ag.png) top left no-repeat;
display: block;}
.name3:hover{background-position: bottom left;}
.name4{height: 24px; width: 120px; overflow: hidden; background:
url(http://cbimg6.com/tutorials/08/02/12/1019ah.png) top left no-repeat;
display: block;}
.name4:hover{background-position: bottom left;}
.name5{height: 29px; width: 98px; overflow: hidden; background:
url(http://cbimg6.com/tutorials/08/02/12/1019ai.png) top left no-repeat;
display: block;}
.name5:hover{background-position: bottom left;}

Create the image you want to be hovered.

Then create the hover for the image.

-Now open the first image in MS Paint.
-Check the attributes of the image, and double the height of it ONLY.
-Open the 2nd image in a separate window of MS Paint
-Select All and copy the image DO NOT X OUT OF THIS WINDOW.
-Paste the hover into the first window and make it fit in the blank space completely and evenly
Save this image and upload it to your image hosting site of choice.

you should now have this

Now, let's go back to the raw HTML, now that the image is ready.

.link1{z-index:5;line-height:10px;position: absolute;width:108px;height:31px;left:510;top:430}

The hover image in MS Paint should still be open.
Check the attributes, and fill in the correct width and height. the absolute is the positioning on your background image, so you can fool around with that until it's where you want it.

.name1{height: 31px; width: 108px; overflow: hidden; background:
url(http://cbimg6.com/tutorials/08/02/12/1019ae.png) top left no-repeat;
display: block;}
.name1:hover{background-position: bottom left;}
fill in the height and width from the hover image, just like how you just filled it out.
with the uploaded image link, fill that in where it should go.

now fill in where you want the link to go.

once you've done all this, you can do it with the rest of your images.

the final product=

Tutorial Comments

Showing latest 10 of 38 comments

This was very well explained! A+

By Butterface89 on Jul 16, 2010 9:47 am

I was curious on how to do this, thank you.

By UnseenQueen on Jul 10, 2010 1:07 pm

so i just made a new div overlay with the rollovers from this tutorial and for some reason no matter what i do the home link/rollover disapeared???

anyone know how i can fix that?

By mystiicdesigns on Jul 9, 2009 8:54 pm

nevermind i figured out how to add more links hehe :)

By mystiicdesigns on Jul 9, 2009 1:18 pm

how do i add more then just 5 rollovers? i attempted to add them but they are not showing up =/

By mystiicdesigns on Jul 9, 2009 1:13 pm

this worked great but was wondering if you knew any easier way to know the exact postioning to each link instead of having to keep changing the numbers a million times until they are exectly where i need them to be...

By mystiicdesigns on Jul 9, 2009 11:51 am