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

Created by: Eric Simmons
Web Site: http://www.jswitch.com

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Eric Simmons | http://www.jswitch.com */
Contact: info AT jswitch DOT com
Website: http://www.jswitch.com
Version: 1.0 03/2007
Browser Target: Mozilla, FireFox, Netscape 6+, IE 5.0+
Type: Smooth Image Buttons

REQUEST: PLEASE ADD A LINK TO THE JSWITCH SITE.
I'M NOT EVEN REQUESTING TOP PAGE LINKS, JUST A LINK SOMEWHERE

DISCLAIMER:
THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT
ANY EXPRESS OR IMPLIED WARRANTIES, JSWITCH.COM
IS NOT RESPONSIBLE FOR ANY ADVERSE AFFECTS TO
YOUR COMPUTER OR SYSTEMS RUNNING THIS SCRIPT.

LICENSE:
YOU ARE GRANTED THE RIGHT TO USE THE SCRIPT
PERSONALLY OR COMMERCIALLY. THE AUTHOR, WEBSITE LINKS
AND LICENSE INFORMATION IN THE HEADER OF THIS SCRIPT
MUST NOT BE MODIFIED OR REMOVED. IF PORTIONS OF THE
CODE ARE TRANSFERED TO ANOTHER SCRIT THE AUTHORS NAME
AND CONTACT INFORMATION MUST BE STATED IN THE NEW SCRIPT
BY THE PORTIONS CODE THAT HAVE BEEN TRANSFERED.

Requirements:
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"

****************************************************************************************/



function init() {
  var jsImgButton;
  jsImgButton = document.getElementsByName("jsimgbutton");
  for(var i=0; i < jsImgButton.length; i++) {
    jsImgButton[i].onmouseover = jsImgButton[i].onmouseup = jsImgButton[i].onmouseout = jsImgButton[i].onmousedown = ButtonState;
  }
}

function ButtonState(evt) {
  if( !evt)
    evt = event;
  else
    evt.srcElement = evt.target;

  var btnWidth = parseInt(evt.srcElement.style.width);

  if(evt.type == "mouseover" )
    evt.srcElement.style.backgroundPosition = "-" + btnWidth+ "px 0px";
  if(evt.type == "mouseout" )
    evt.srcElement.style.backgroundPosition = "0px 0px";
  if(evt.type == "mousedown" )
    evt.srcElement.style.backgroundPosition = "-" + btnWidth * 2 + "px 0px";
  if(evt.type == "mouseup" )
    evt.srcElement.style.backgroundPosition = "-" + btnWidth+ "px 0px";
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  init();
});

Head

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


<script type="text/javascript" src="ImgButtons.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p> Four different colors of test buttons.?
<div name="jsimgbutton" id="jsimgbutton" style=" width:100px; height:25px;background:url(red.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style=" width:100px; height:25px;background:url(blue.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style=" width:100px; height:25px;background:url(green.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style=" width:100px; height:25px;background:url(yellow.png) no-repeat 0 0;"></div>
<p>Did you say toolbar?</p>
<div style="width:175px;height:35px;">
<div name="jsimgbutton" id="jsimgbutton" style="float:left;;width:35px; height:35px;background:url(ttest.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style="float:left; width:35px; height:35px;background:url(ttest.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style="float:left; width:35px; height:35px;background:url(ttest.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style="float:left; width:35px; height:35px;background:url(ttest.png) no-repeat 0 0;"></div>
<div name="jsimgbutton" id="jsimgbutton" style="float:left; width:35px; height:35px;background:url(ttest.png) no-repeat 0 0;"></div>
</div>

Other

Download the images using the URL below:

Download the images here

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

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details