Image Hovers

Have you ever wanted to make a layout with image hovers? Well, this tutorial will show you how. If you don’t know what an image hover is, then click here to see some on my Escape the Fate layout. You will need to know how to code a basic DIV, first.

First, make an image that you want to use for your link/hover. Make sure that your link is directly on top of the hover. Also, make sure that they are lined up perfectly, or else they will look weird when someone tries to hover over them.
Here’s an example of mine:

After you have created all of your links, and you are ready to code your DIV, add this code into your stylesheet somewhere between the style tags:

Be sure to change the XXX’s to the correct value the link is from the left of the screen and the top of the screen. Change the values for the width and the height of the link. The height should always be an even number. Remember, this is the height of your link/hover image. Don’t change the link names, unless you’re adding more. If you add more, just change the number after the word link. You can add as many links as you want. Make sure each link is titled differently.

Then, put the following code in your stylesheet, between the style tags:

.name1{width: XXpx; height: 40px; overflow: hidden; background: 
url(LINK IMAGE URL HERE) top left no-repeat; 
display: block;}
.name1:hover{background-position: bottom left;}
.name2{width: XXpx; height: XXpx; overflow: hidden; background: 
url(LINK IMAGE URL HERE) top left no-repeat; 
display: block;}
.name2:hover{background-position: bottom left;}
.name3{width:XXpx; height: XXpx; overflow: hidden; background: 
url(LINK IMAGE URL HERE) top left no-repeat; 
display: block;}
.name3:hover{background-position: bottom left;}
.name4{width: XXpx; height: XXpx; overflow: hidden; background: 
url(LINK IMAGE URL HERE) top left no-repeat; 
display: block;}
.name4:hover{background-position: bottom left;}
.name5{width: XXpx; height: XXpx; overflow: hidden; background: 
url(LINK IMAGE URL HERE) top left no-repeat; 
display: block;}
.name5:hover{background-position: bottom left;}
.name6{width: XXpx; height: XXpx; overflow: hidden; background: 
url(LINK IMAGE URL HERE) top left no-repeat; 
display: block;}
.name6:hover{background-position: bottom left;}

Once you’ve added that code, you’ll need to change things in it. Where it says .name(NUMBER), change the numberto whatever your number is in your link name. Be sure to keep the .name part, and don’t put the work link! After you’ve changed all the link names, you will want to change the width and height values. (Those are the XX’s) Your width will be the same as your link/hover image, but your height won’t. Your height will be half that. So grab a calculator and divide your image by two. It should always end up to be an even number, so if it didn’t, then you either divided wrong, or your image isn’t lined up correctly. You should put the link/hover URL where I, being so great, put LINK IMAGE URL HERE. Don’t change anything else!

Next, you’ll want to add yet another code! This time, it shouldn’t be in between style tags. Here’s the code:

Okay, you will have to edit these too. You’ll have to change the link(NUMBER) to match your first code’s link(NUMBER)’s. Then, put in your url to where you want your links to take you when clicked. After that, change the name(NUMBER) to match your second code’s name(NUMBER) ‘s. If you did it right, the link/name with numbers should go in sequence.

After you’ve finished with those few easy steps, you’re done! Now, you should have a gnarly image hovering DIV! (:

If you are having any trouble, feel free to contact me.

Warning: include(footer.php) [function.include]: failed to open stream: No such file or directory in /home/.pish/kelci/thisstatic.net/psp5.php on line 118

Warning: include() [function.include]: Failed opening 'footer.php' for inclusion (include_path='.:/usr/local/php5/lib/php:/usr/local/lib/php') in /home/.pish/kelci/thisstatic.net/psp5.php on line 118