Tutorial
Click on thumbnailed images to enlarge
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.
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+
I was curious on how to do this, thank you.
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?
nevermind i figured out how to add more links hehe :)
how do i add more then just 5 rollovers? i attempted to add them but they are not showing up =/
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...
w0w my lyt iz coded diffrent so ill re-code it and try this
thxx
Does it work on Freewebs?
i followed your instruction and it didn't work for me.
it didn't even show up for me.
help pls!
helped
thanks
Tutorial Details
Author | bangxdisco |
Submitted on | Feb 12, 2008 |
Page views | 22,663 |
Favorites | 127 |
Comments | 38 |
Reviewer | mlothepimp |
Approved on | Feb 12, 2008 |