CodeLifter.com - JavaScript Dirt-Simple Four-State Image Button Script

CodeLifter.com
Software & Scripts by CodeBrain.com

Home

JavaScripts

PopUp Maker
- popup windows

CodeLifter 5
- source viewer

ScrollBar Styler
- color scrollbars

Flash Fixer
- remove alerts

Roll-Over Maker
- image roll-overs

Link Cloaker 5
- encrypt links

Site Capture 3
- hidden frames

CHMOD 2 Utility
- chmod utility

BlackBird 3.0
- browser shell

Zoom 1.0
- magnifier

MicroTicker.com
- text scroller

CodeBrain.com
- java applets

D3Q.com
- xp icon control

BrainCode.com
- java applets

MailToProtector
- protect email

JavaScript Dirt-Simple Four-State Image Button Script
Easy Interactive Button

Index

Move the mouse slowly over each image, press
down the mouse button, then slowly release it.
Exercise the buttons more rapidly to see the full
effect. The image buttons have true four-state
motion. Images are linkable, of course, though
we don't have them linked in this demo.

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

============================================================
Script:     Dirt-Simple Four-State Image Buttons Script

Functions:  Creates four-state mouse-interactive image 
            buttons without layers or multiple images

Browsers:   IE4-6, NS6 (Degrades gracefully in others)

Author:     etLux
============================================================

Step 1. Insert the Style Script

Put the following style script in the head of your page.
You can change the top, left, bottom, and right border sizes
to anything you wish.

IMPORTANT:  The trick, here, to keep this from blowing up
your layout is just to keep things symmetrical.  That is,
the values in all the top-bottom pairs must always add up
to the same figure -- in all four of the styles. Same thing
with the left-right pairs.

<style>
<!--

.mouseBeOffMe {
border-top:    10px  solid #000000; 
border-bottom: 10px  solid #000000; 
border-left:   6px   solid #000000; 
border-right:  10px  solid #000000; 
}

.mouseBeOnMe {
border-top:    6px   solid #000000;
border-bottom: 14px  solid #000000; 
border-left:   10px  solid #000000; 
border-right:  6px   solid #000000;
}

.mouseBeDown {
border-top:    13px  solid #000000;
border-bottom: 7px   solid #000000; 
border-left:   10px  solid #000000; 
border-right:  6px   solid #000000;
}

.mouseBeUp {
border-top:    10px  solid #000000;
border-bottom: 10px  solid #000000; 
border-left:   10px  solid #000000; 
border-right:  6px   solid #000000;
}

//-->
</style>

============================================================

Step 2. Setting Up The Images

Next, you need to attach the style name mouseBeOffMe to 
each image, as well as four mouse events.  (Optionally,
you can also use a title= which will act rather like a
drop-down text tag.)

The simplest way to understand this is to view a code sample
(below).  The code sample uses three images.  All you 
change is the title (optional, just pull it if you don't
want it), the image file name, and the width= and height=
to match your image spec.s.

Other than that, just follow the pattern to add more images.
Insert the code anywhere in the body of your page when you
are done, and, voila... practically instant four-state
image buttons.

Note that the code below is in expanded format for sake
of clarity.  (Yes, it will work that way.)  You can, of
course, as you usually would, close all of the code up
onto a single line for each image tag.

To make the images linkable, just surround each image
tag with an <a href> ... </a> just like any other image.

============================================================

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MP3
Downloads

Contemporary classical music, completely free.