• Image Editing Software (ie: Adobe Photoshop)
• An average understanding your editing software
• Notepad or other code editing software

I believe this is the best way to create any type of image rollover. Other ways are to use JavaScript but I find this unnecessary because the CSS way is very straight forward and easy to do. A example of this would be my “Portfolio” button I have on the front of my website. You’ll see when you roll your mouse over the button (On the main page) changes from a shade of green to a shade of blue.

Now let’s open your image editing software. I prefer to use Adobe Photoshop because it is the most common editing software available. For this tutorial I am going to be using a button I made when I designed this website.

This image is 222 pixels wide and 57 pixels in height. With the image opened in you edit software we’re going to change the “Canvas Size”. You can find “Canvas Size” in Photoshop under “Image” in the overhead menu.

Now the way I’ve learned to do a proper CSS Image Rollover is to use 1 image for both actions (normal position and hover position). This makes the loading of the images smoother and requires 1 less image. Let’s double the height of the “Canvas” and make it 114 pixels (Original height of 57 pixels X2). Note: Make sure you select the top center box for “Anchor:” so that we are adding the extra 57 pixels of canvas BELOW our existing image.

Make sure this image above looks like what your looking at. Next under “File” in the above menu you want to select “Place” and select the same image you’ve started with but place it underneath using snaps to ensure that it is exactly under neath.

From this point we need to alter the bottom image so that it differs from the image above. I’ve chosen to just make my button green using my original files. You can use some form of “Blending Options” to achieve a different look.

Save your file and put away your image editing software. Now open the page you want to add your button to in your favorite code writing software (ie: Notepad, Coda, Dreamweaver etc). Now lets go to your style sheet or inline styling section and add the few lines of code we need to make this work.

Ok, I’m calling this “.button_folio”, name it whatever you want just remember it so when you write your code you don’t confuse yourself. The height and width are what we want to be visible and since we are telling this to display as a block we wont see anything below 57px of the height. With the background we will be linking to our single image that we created earlier. Note that in background we have “0 -57″ this very important because we’re telling the browser to start this background 57 pixels below what it normally would.

.button_folio {
width:222px;
height:57px;
display:block;
background:url(images/button_folio.gif) 0 -57px no-repeat;
}

This is the final CSS that will tell the browser to move the background position to “0 0″ (which is 57 pixels higher) when you “hover” your mouse over it.

.button_folio:hover {
background-position:0 0;
}

Now to use this new “Class” on your page. Since this is a button and we’re using it to link to a page it only make sense to use this class on a link. Just add the code below to a link before “href” or after the URL.

class="button_folio"

Pow there you go! We made two new classes in a style sheet and called it out on the page. I believe this to be the best way to do this. I’m sure if you are a “text replacement nut” you can add text within the link instead of leaving nothing in between the tag and use a span to indent the text off the screen but I don’t really understand catering to people who don’t use style sheets.

I hope I did a good job of explaining this, this is my first tutorial on here so any feedback would appreciated.