Home » Tutorials » Three-State Button - Part 2
Three-State Button - Part 2
How to easily implement three-state buttons on your website.
Step 1
Create a new document in ImageReady of the size 75 px by 25 px with a transparent background.
Step 2
Now
open up your other three states of your button. They should be .jpg format files. Your workspace should look like this:
Step 3
Now drag the sole layer from each of your hit states into the new document. Your new document's layers palette should look like this:
Step 4
Now click the
rollovers tab and click the button below that with a mouse and a star:
Step 5
Make sure on your "Normal" state that only the "normal" layer is
visible. The others should be transparent. Clicking the button should automatically add an "Over" state. Now click on that over state and make only your "over" layer
visible.
Step 6
Now create a new rollover state by clicking the button right next to the mouse and star (looks like the button to create a new layer). It should automatically be the "Down" state.
Step 7
Now while that rollover is selected, make your hit (down, same thing) layer
visible and the rest transparent.
Step 8
Now to save your file, go to
File>Save Optimized As...
Make sure it is
.html and images and name your file. Now find the .html file and open it. It should work like a charm! Just insert the html in that file into your other html pages like it is entered and your button will work on your site, just like it does below.
Necessary Code
To make sure your button works on your site, the following code must be inserted.
First, insert the following into your
<![CDATA[<HEAD> </HEAD>]]> tags:
Your image names may be different.
Your next piece of code needs to go in your BODY tag:
<![CDATA[<BODY ONLOAD="preloadImages();">]]>
The last piece of code is your acutal button and goes wherever you want it on your page:
