joelcarranza/gist:883aa1ceed189da455af

## gistfile1.html
<html>
<title>Inspect Me</title>

<style>
body {
	margin: 20px;
	font-size: 18px;
}

img {
	border: 3px solid gray;
}

button {
	font-size: 16px;
}

.photo {
	padding-bottom: 10px;
}

#caption {
	font-size: 120%;
	color: rgb(255,0,0);
}
</style>

<body>
	<div class="photo">
		<img id="image" src="http://static.guim.co.uk/sys-images/Observer/Pix/pictures/2011/7/13/1310556523267/Boredom-feature-007.jpg">
		<p id="caption">I'm bored....</p>
	</div>
	<button id="party">Let' Party!</button>
</body>
<script>
	var PARTY_URL = 'http://33.media.tumblr.com/45cd650e8ce9ff54512063d1c4e8047e/tumblr_mjy3d7lx2P1s2hhg6o1_500.gif';

	var partyButton = document.getElementById('party');
	partyButton.addEventListener('click',function() {
		var imageElement = document.getElementById('image');
		imageElement.setAttribute('src',PARTY_URL);

		var captionElement = document.getElementById('caption');
		captionElement.style.display = 'none';
	});
</script>
</html>
	<html>
	<title>Inspect Me</title>

	<style>
	body {
	margin: 20px;
	font-size: 18px;
	}

	img {
	border: 3px solid gray;
	}

	button {
	font-size: 16px;
	}

	.photo {
	padding-bottom: 10px;
	}

	#caption {
	font-size: 120%;
	color: rgb(255,0,0);
	}
	</style>

	<body>
	<div class="photo">
	<img id="image" src="http://static.guim.co.uk/sys-images/Observer/Pix/pictures/2011/7/13/1310556523267/Boredom-feature-007.jpg">
	<p id="caption">I'm bored....</p>
	</div>
	<button id="party">Let' Party!</button>
	</body>
	<script>
	var PARTY_URL = 'http://33.media.tumblr.com/45cd650e8ce9ff54512063d1c4e8047e/tumblr_mjy3d7lx2P1s2hhg6o1_500.gif';

	var partyButton = document.getElementById('party');
	partyButton.addEventListener('click',function() {
	var imageElement = document.getElementById('image');
	imageElement.setAttribute('src',PARTY_URL);

	var captionElement = document.getElementById('caption');
	captionElement.style.display = 'none';
	});
	</script>
	</html>