« »

A tiny, self-contained JavaScript library which displays a Gregorian calendar. An event is triggered when a user clicks on a date. Fully customizable via CSS. (Uses a European layout, i.e., the week begins on Monday.)

Label: fcp Calendar

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Smooth_Image_Buttons_images.zip

Copy All x2

<script language="javascript">
/*
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();
});

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->