razass/luchenbill.html

## luchenbill.html
<!DOCTYPE html>

<html>

 <head>
  <title>lucenbills test</test>
  <script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
  <style type="text/css">
#image {
  width: 300px;
  height: 300px;
  background-color: grey;
  position: relative;
}

.img_1 {
  background-image: url('1.png');
  width: 300px;
  height: 300px;
}

.img_2 {
  background-image: url('2.png');
  width: 300px;
  height: 300px;
}

.img_3 {
  background-image: url('3.png');
  display: none;
  width: 300px;
  height: 300px;
  float: left;
}
  </style>
 </head>


 <body>

<script>

YUI().use('node', 'event', function(Y) {
  Y.one('#btn').on('click', function(e) {

var swp = Y.one('#swap');
swp.addClass('img_2');
swp.removeClass('img_1');
});


});

</script>

   <div id="image">

     <div id="swap" class="img_1"></div>
<button id='btn'>Click</Button>

   </div>

 </body>

</html>
	<!DOCTYPE html>

	<html>

	<head>
	<title>lucenbills test</test>
	<script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
	<style type="text/css">
	#image {
	width: 300px;
	height: 300px;
	background-color: grey;
	position: relative;
	}

	.img_1 {
	background-image: url('1.png');
	width: 300px;
	height: 300px;
	}

	.img_2 {
	background-image: url('2.png');
	width: 300px;
	height: 300px;
	}

	.img_3 {
	background-image: url('3.png');
	display: none;
	width: 300px;
	height: 300px;
	float: left;
	}
	</style>
	</head>


	<body>

	<script>

	YUI().use('node', 'event', function(Y) {
	Y.one('#btn').on('click', function(e) {

	var swp = Y.one('#swap');
	swp.addClass('img_2');
	swp.removeClass('img_1');
	});


	});

	</script>

	<div id="image">

	<div id="swap" class="img_1"></div>
	<button id='btn'>Click</Button>

	</div>

	</body>

	</html>