Untitled

<!DOCTYPE html>
<html>
<head>
	<title>jQuery CSS- en HTML-functies</title>
	<!-- CSS -->
	<!-- CSS -->
	<style>
		body {
			font-family: Verdana, Geneva, sans-serif;
			font-size: 24px;
		}
		img {
			display: block;
			width: 300px;
		}
	</style>
</head>
<body>
	<!-- HTML -->
	<img src="../img/kitten1.jpg" id="imgKitten" />
	<div id="divResult"></div>
	<button id="knopToggle">Wissel afbeelding</button>

	<!-- JavaScript -->
	<script src="../scripts/jquery-1.11.1.min.js"></script>
	<script>
		$(document).ready(function () {

			// Toon url van huidige afbeelding in divResult
			var url = $('#imgKitten').attr('src');
			$('#divResult').text('bron : ' + url);

			// Zelfde resultaat:
			//$('#divResult').text('bron : ' + $('#imgKitten').attr('src'));


			// tellertje
			var i = 1;

			// Event handler voor de knop
			$('#knopToggle').on('click', function () {
				// 1. teller ophogen
				i++;

				// 2. afbeelding aanpassen
				$('#imgKitten').attr('src', '../img/kitten' + i + '.jpg');

				// 3. reset i indien nodig.
				if (i > 2) {
					i = 0;
				}

				// 4. Url in het document tonen
				$('#divResult').text('bron : ' + $('#imgKitten').attr('src'));
			});
		}); // einde document.ready
	</script>
</body>
</html>