topical media & game development

talk show tell print

graphic-javascript-effect-image-button.js / js



  /* This script and many more are available free online at
  The JavaScript Source!! http://javascript.internet.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();
  });
  
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.