Web Hosting by Netfirms | Free Domain Names by Netfirms

XBUTON JAVASCRIPT OBJECT

Put the mouse over 1 of the three buttons on the right and watch the picture change. Move the mouse away from the button and the picture will change. Click the mouse on the button and the pictue will change. Keep clicking on a particular button until it moves out of the defined zone.

The object is fully customizable, the following attributes can be set:

1. Events to capture: on down, up, out and Click
2. Pictures: over, out and activate.
3. Width and heigt of button (Image is streched to given dimensions)

An extra benefit of using an xLayer button is that it can be dynamical controlled for example it can be added to an avoid object or a drag object. In this case moving!

Code!
<script language="javascript" src="xLayer.js"></script> <script language="javascript" src="xButton.js"></script> <script language="javascript"> function init() { var x = S.w/2+150; var y = S.h/2; minimizeButton = new xButton(50,50,"images/minimize_default.jpg","images/minimize_down.jpg","images/minimize_rollover.jpg"); minimizeButton.show(); minimizeButton.slideTo(x,y); minimizeButton.onmouseup = new Function("down(" + minimizeButton.id + ")"); maximizeButton = new xButton(50,50,"images/maximize_default.jpg","images/maximize_down.jpg","images/maximize_rollover.jpg"); maximizeButton.show(); maximizeButton.slideTo(x+50,y); maximizeButton.onmouseup = new Function("down(" + maximizeButton.id + ")"); defaultButton = new xButton(50,50,"images/exit_default.jpg","images/exit_down.jpg","images/exit_rollover.jpg"); defaultButton.show(); defaultButton.slideTo(x+100,y); defaultButton.onmouseup = new Function("down(" + defaultButton.id + ")"); } function down(objXbutn) { objXbutn.slideTo(objXbutn.getX() + objXbutn.w, objXbutn.getY() + objXbutn.h); if(objXbutn.getX() >= S.w - 100) { objXbutn.slideTo(0,objXbutn.getY()); } if(objXbutn.getY() >= S.h - 100) { objXbutn.slideTo(objXbutn.getX(),0); } } </script>