Smooth Image Buttons | JavaScriptSource

Smooth Image Buttons

Eric Simmons Apr 2, 2007

General

With this script your buttons can have up to four states: none, over, down, and up. This makes the button feel more real than a simple mouseover. In addition, the different button states are all part of the same background image.


Four different colors of test buttons.?

Did you say toolbar?

Notes

  • The div width properties must be set inline (within the div tag not the CSS file).
  • The button div elements must have both name and ID = "jsimgbutton".

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: ImgButtons.js


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Other

Download the images using the URL below:

Leave a Response

(3 comments)

This does not work in Opera. [p]Thanks, [br /]Susan

Susan Cannon Apr 14, 2007

The source code for ImgButtons.js has some extra text not properly surrounded with comment tags.[p]Otherwise - excellent!

Bruce Osterberg Apr 13, 2007

Now this is a cool and intelligent concept (much like the old mipmapping of video game textures)! No more messy image preloads or tons of button-state images on your server (and only one image file to maintain/upload). Great contribution!!!

Micah Apr 2, 2007