What It Is
This is a way to do rollovers using a few transparent images, and CSS.
This is what I'm going to show you how to do.
Step 1: Make The Buttons
I made the buttons in Photoshop.
If you want to make them just how I did, you'll need Photoshop (I used 6.0, but you should still be able to follow along if you don't have that one), and a mini font. I used Silkscreen Expanded (You can get it at CatScape, just search for silkscreen).
I made the first button by starting a new document with the following settings:
Next, select the line tool.
Zoom in 200%, or however much you like so you can see better.
On the first layer, in the outer edges of the canvas (In the gray area), click the left mouse button, and hold it. Now click the "Shift" key on the keyboard so it keeps the line straight. Drag all the way to the outer edges of the other side.
Click the move tool (or press V on the keyboard).
While on layer 1 (and most likely the only layer at this point), click and drag the line until it "snaps" itself to the top.
Make a new layer.
On that new layer, repeat what you did, only snap it to the bottom. The vertical lines work the same way, only snap them to the left and right. Just make sure all your lines are on seperate layers, until you done. When your done, you can merge them if you like.
Click the text tool (or press T), and set the option bar at the top to the following:
Click in the canvas, and type the text for your button. I typed <html> for my first button.
Go to View > New Guide. Select "Vertical", and type 50 where you see "0 px".
Go back to View > New Guide, and this time select "Horizontal", and type 15 where you see "0 px".
Click and drag the text layer horizontally, until the center "snaps" along the vertical guide. Then drag it down until the center "snaps" on the horizontal guide.
That's all there is to the button. Now it has to be saved for a website, so go to File > Save For Web (Shortcut: Alt + Shift + Ctrl + S).
You need to save it as a transparent .gif, so use the settings above. Click OK, and your first button is completed.
Step 2: The HTML
The only thing you really need to know about the related HTML, is you set the
style sheet to this:
<style type="text/css">
<!--
body,td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000}
a { text-decoration: none}
a:hover { background-color: #8FB1BF}
h3 { color: #274C5C}
-->
</style>
The only important part is a:hover. You can set the background-color to whatever you like. You can also set the rest of the CSS however you want it.
Here's what the entire HTML for this page looks like.
<html>
<head>
<title>Rollovers</title>
<style type="text/css">
<!--
body,td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000}
a { text-decoration: none}
a:hover { background-color: #8FB1BF}
h3 { color: #274C5C}
-->
</style>
</head>
<body bgcolor="#C3D0D5" text="#000000">
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">
<h3>Fake Rollovers!</h3>
<p>
These rollover buttons are made with transparent .gifs, and the CSS "a:hover"
set to a background color (#8FB1BF). The images are see through, so when you hover
your mouse over them the new background color shows and it's like your using Rollovers,
when your really just using some CSS!
</p>
<p>
<a href="index.html"><img src="html.gif" width="100" height="30" vspace="2" border="0"></a><br>
<a href="index.html"><img src="head.gif" width="100" height="30" vspace="2" border="0"></a><br>
<a href="index.html"><img src="title.gif" width="100" height="30" vspace="2" border="0"></a><br>
<a href="index.html"><img src="body.gif" width="100" height="30" vspace="2" border="0"></a>
</p>
</td>
</tr>
</table>
</body>
</html>
If you only want the Image links to have a background when hovered, and not all your links, then instead of a:hover, type "a.somename:hover" where it says a:hover, and in the links around your image, put class="somename". Like this:
<html>
<head>
<title>Rollovers</title>
<style type="text/css">
<!--
body,td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000}
a { text-decoration: none}
a.somename:hover { background-color: #8FB1BF}
h3 { color: #274C5C}
-->
</style>
</head>
<body bgcolor="#C3D0D5" text="#000000">
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top">
<h3>Fake Rollovers!</h3>
<p>
blah blah blah....
</p>
<p>
<a href="index.html" class="somename"><img src="html.gif" width="100" height="30" vspace="2" border="0"></a><br>
<a href="index.html" class="somename"><img src="head.gif" width="100" height="30" vspace="2" border="0"></a><br>
<a href="index.html" class="somename"><img src="title.gif" width="100" height="30" vspace="2" border="0"></a><br>
<a href="index.html" class="somename"><img src="body.gif" width="100" height="30" vspace="2" border="0"></a>
</p>
</td>
</tr>
</table>
</body>
</html>
Main?