Use these to jump around or read it all…
[Get the Materials]
[Getting the Images for the Buttons]
[Creating the Button]
[Grab the Script]
[Alter the Script]
[Run It!]
Read this: This effect is created through an image flip format. It will work on the largest number of browsers.
However, if your users happen to use Internet Explorer browsers, there’s a far easier method to getting this effect. See here.
There are a few letters that I get time and time again that I cannot answer. The reason is that what the person is asking for cannot be done through HTML commands. One of those types of letters is the one that asks for a way to add color to the link buttons. Gray gets boring after a while. The problem is that there isn’t a command, at the moment, that will change the color. But it kept nagging at me that there had to be a way to do it. So, I took an afternoon and went looking. Is this what you wanted?
|
|
Ta Da! Well, there they are. They’re different colors and they work just like regular link buttons. But they were created in a completely different fashion. I’ll tell you this up front — you had better really want colored link buttons bad… or don’t get started with this one.
Get the Materials
You will need a few things to be able to do this. You see, the things above aren’t link buttons at all. They are actually combined images using a JavaScript to get the motion.
Here’s what you’ll need:
- A Graphics Program that does Screen Captures
PaintShop Pro is my favorite. Get it at shareware.com.
- The normal button image and the pressed button image
You’ll get these through the Screen Capture.
- The JavaScript
Getting the Images for the Button
This little section is titled “Learning How To Screen Capture Using Paint Shop Pro.”
Go to the Screen Capture Tutorial
Now that you have the power to capture images right off the screen, create a link button to the page you want to visit. Here’s the code to create the button:
<form action=”http://www.server.com” method=”link”>
<INPUT TYPE=submit value=”words on the button”>
</form>
Just paste it into an HTML document and display it in a browser. It doesn’t matter if it actually links or not. You’ve only created it to do a screen capture.
Set your screen capture to NOT include the cursor. Then do two captures:
- Capture the button as it appears.
- Click the button and hold it. Do a capture with the button pressed in.
In your graphics program, make sure the two images are the same height and width. This is important or the JavaScript won’t work properly. Here’s an idea of what I’m talking about. These are the two images used to create the Goodies button above:
Once you have the two images, use your graphics program to color them any darn color you want. You can even candy-stripe them if the mood hits you. Make them different colors… oh, I could go on forever.
Creating the Button
Now that we have all the parts, let’s build a button. You’ll need the following JavaScript. When you use this script be very sure to either turn off your word wrap or edit in a text editor that does not have margins. If you alter the width of this script in any way, it will not work. You’ll note when you get the script that there is also a TABLE section attached — get that too. That displays the button.
Grab the JavaScript
The best way to make this work is to place the JavaScript portion of what you just grabbed into the HEAD section of your document and place the table section into the BODY section of your document.
Note: You could also use this JavaScript format. It’s a little smaller and a little easier.
Alter the Script
Make the following changes. Please note that each might appear more than once in the script.
- Change out ### with the width of your image.
- Change out ## with the height of your image.
- Change out FIRSTIMAGE.gif with the name of the “up” button image.
- Change out PRESSEDIMAGE.gif with the name of the image.
- Change out INSTATUSBAR with the wording you want to appear in the status bar.
Notice the script you just grabbed is set up to run only one button. In order to have others, you need to add to the script and add another table section.
To add a button, go to this in the script:
object[’home’]= new objectdata(###,##,”PRESSEDIMAGE.gif”,
“FIRSTIMAGE.gif”,”IN STATUS BAR”);
Add another one just like it with a new object name. The one above is ‘home’. Change it to another word. Then enter all the information outlined above for the new image sizes and names. Then add a second TABLE section where you want the button to reside:
<TABLE WIDTH=”100″ BORDER=”0″ CELLSPACING=”0″ CELLPADDING=”0″ > <A HREF=”index.html” OnClick=”ReplaceOrig(‘home’);return true;” OnMouseOut=”RestoreOrig(‘home’);”>
<TR VALIGN=”BOTTOM” NOWRAP ALIGN=”CENTER”>
<TD HEIGHT=”32″>
<IMG SRC=”FIRSTIMAGE.gif” NAME=”home” WIDTH=### HEIGHT=## BORDER=”0″ NATURALSIZEFLAG=”0″ ALIGN=”BOTTOM”></A>
</TABLE>
See above where it says ‘home’ in the two places? You need to change that out with whatever word you noted in the new object line you added to the script.
Don’t get flustered. Once you do it a time or two, you’ll see how easy it is to alter this for a ton of buttons. The really hard part is the time consumption in making the buttons.
Run It!
Place the HTML document and the images in the same directory. If all is done correctly, you’re done. Click like a madman!
Like I said at the beginning, you must have really wanted this button to read through all of that.
[Get the Materials]
[Getting the Images for the Buttons]
[Creating the Button]
[Grab the Script]
[Alter the Script]
[Run It!]
