»
AnglaisFran�aisVietnamien

Imprimer - Bar Graph - JavaScriptBank.com

Version compl�te: jsB@nk » Pointer » Bar Graph
URL: https://www.javascriptbank.com/bar-graph-index.html

Bar Graph © JavaScriptBank.comBarres horizontales ou verticales pour naviguer poniter.

Version compl�te: jsB@nk » Pointer » Bar Graph
URL: https://www.javascriptbank.com/bar-graph-index.html



CSS
<style type="text/css">.hBarC { /* horizontal bar container */  position:absolute;  overflow:hidden;  border:1px solid #333;  background:#ccc;}.hBar { /* horizontal bar */  position:absolute; overflow:hidden;  margin:0; padding:0;  background:#900;}.vBarC { /* vertical bar container */  position:absolute; overflow:hidden;  margin:0; padding:0;  border:1px solid #333;  background:#ccc;}.vBar { /* vertical bar */  position:absolute; overflow:hidden;  margin:0; padding:0;  background:#009;}.marker {  position:relative;  visibility:hidden;}#content1 {  position:absolute;  overflow:hidden;  margin:0; padding:8px;  color:#369; background:#fff;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script src="x_core.js"></script><script src="x_event.js"></script><script src="x_bar.js"></script><script type="text/javascript">//// Applicationvar bars = new Array();window.onload = function(){  if (xNN4 || xIE4 || !document.createElement) return;    bars[0] = new xBar('ltr', 'hBarC', 'hBar');  bars[1] = new xBar('ttb', 'vBarC', 'vBar');  bars[2] = new xBar('rtl', 'hBarC', 'hBar');  bars[3] = new xBar('btt', 'vBarC', 'vBar');  winOnResize(); // initial setup    xAddEventListener(document, 'mousemove', docOnMouseMove, false);  xAddEventListener(window, 'resize', winOnResize, false);}function docOnMouseMove(evt){  var e = new xEvent(evt);  bars[0].update(e.pageX);  bars[1].update(e.pageY);  bars[2].update(e.pageX);  bars[3].update(e.pageY);}function winOnResize(){  var l = 200, s = 20;  var cw = xClientWidth();  var ch = xClientHeight();  var x = cw - l - s - 20;  var y = xPageY('m1');  bars[0].paint(x, y, l, s);  bars[1].paint(x+l, y, s, l);  bars[2].paint(x+s, y+l, l, s);  bars[3].paint(x, y+s, s, l);  bars[0].reset(xClientWidth(), 0);  bars[1].reset(xClientHeight(), 0);  bars[2].reset(xClientWidth(), 0);  bars[3].reset(xClientHeight(), 0);  xResizeTo('content1', l-s, l-s);  xMoveTo('content1', x+s, y+s);/* debug  var ele = xGetElementById('content1');  var s = 'content1:\n' + xWidth(ele) + ', ' + xHeight(ele) + '\n' + ele.offsetWidth + ', ' + ele.offsetHeight;  ele = xGetElementById(bars[0].con);  s += '\n\nbars[0]:\n' + xWidth(ele) + ', ' + xHeight(ele) + '\n' + ele.offsetWidth + ', ' + ele.offsetHeight;  alert(s);*/}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div class="hBarC" style="width: 198px; height: 18px; left: 769px; top: 38px;" title="614"><div class="hBar" style="width: 200px; height: 20px; top: 0px; left: -78px;" title="614"></div></div><div class="vBarC" style="width: 18px; height: 198px; left: 969px; top: 38px;" title="232"><div class="vBar" style="width: 20px; height: 200px; left: 0px; top: -119px;" title="232"></div></div><div class="hBarC" style="width: 198px; height: 18px; left: 789px; top: 238px;" title="614"><div class="hBar" style="width: 200px; height: 20px; top: 0px; left: 78px;" title="614"></div></div><div class="vBarC" style="width: 18px; height: 198px; left: 769px; top: 58px;" title="232"><div class="vBar" style="width: 20px; height: 200px; left: 0px; top: 117px;" title="232"></div></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/mouse/Bar_Graph/x_bar.jshttp://javascriptbank.com/javascript/mouse/Bar_Graph/x_core.jshttp://javascriptbank.com/javascript/mouse/Bar_Graph/x_event.js