Smooth Image Buttons | JavaScriptSource

Smooth Image Buttons

Eric Simmons Apr 2, 2007


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?


  • 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


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


Paste this code into the BODY section of your HTML document


Download the images using the URL below:

Leave a Response


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