Banner Code Generator

<style>
	/* Banner Code Generator by Memoria at The Initiative.
	   Last updated 09.16.18.
	   Please do not remove credits! */

	/* Banner Code Generator - Overall Styles */
	.bcg-banners, #bcg-code {
		margin: 0 0 20px 0;
	}
	.bcg-banners h3, #bcg-code h3 {
		margin: 0 0 10px 0;
	}
	.bcg-banners, .bcg-banners *, #bcg-code, #bcg-code * {
		box-sizing: border-box;
	}

	/* Banner Code Generator - Banners */
	.bcg-banners img {
		cursor: pointer;
	}

	/* Banner Code Generator - Code */
	#bcg-code pre, #bcg-code code {
		margin: 0;
		border: 0;
		padding: 0;
	}
	#bcg-code pre code {
		display: block;
		font-family: 'Courier New', monospace;
		background: #222222;
		color: #ededed;
		padding: 20px;
		white-space: pre-wrap;
		overflow: auto;
	}
</style>
<!-- Replace image src and alt attributes -->
<div class="bcg-banners">
	<h3>88 x 31</h3>
	<div class="bcg-banner-wrapper">
		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" />
		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.dog-88x31.jpg.e110ed7e659d4820f80524612a2fd371.jpg" alt="Good Dog 88x31" />
		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.lightning-88x31.jpg.032eb052921d1ccff05e087fe25c52e5.jpg" alt="Lightning 88x31" />
	</div>
</div>
<div class="bcg-banners">
	<h3>100 x 50</h3>
	<div class="bcg-banner-wrapper">
		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-100x50.jpg.99c46680c93434a9be17399debf228ba.jpg" alt="Coffee 100 x 50" />
		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.dog-100x50.jpg.6fe7680fb0d8dedbc70e85586c3256da.jpg" alt="Good Dog 100 x 50" />
		<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.lightning-100x50.jpg.4e730090bd83fb5081f88357c5600d9c.jpg" alt="Lightning 100 x 50" />
	</div>
</div>
<!-- Replace the image src and alt attribute as well as the site url (google.com) -->
<div id="bcg-code">
	<pre><code>&lt;a href="//google.com"&gt;
	&lt;img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" /&gt;
&lt;/a&gt;</code></pre>
</div>
<script>
	// Banner Code Generator by Memoria at The Initiative.
	// Last updated 09.16.18.
	bannerCodeGenerator('.bcg-banners img', '#bcg-code code');
	
	// You only need to add this function once
	function bannerCodeGenerator(bannerImages, bannerCode) {
		var codeBlock = document.querySelector(bannerCode);

		if (codeBlock) {
			// Re-usable variables
			var codeHTML = codeBlock.innerHTML;
			var currentImage = codeHTML.match(/src=\"(.*?)\"/)[1];
			var currentAlt = codeHTML.match(/alt=\"(.*?)\"/)[1];
		
			// Loop through all banner images and attach onclick event
			var bannerArray = document.querySelectorAll(bannerImages);
			for (var i = 0; i < bannerArray.length; i++) {
				bannerArray[i].onclick = function(e) {
					changeBannerCode(e, currentImage, currentAlt);
				};
			}
		
			// Function to change banner code
			function changeBannerCode(e, image, alt) {
				// Element that has been clicked
				var selector = e.target || e.srcElement;
		
				// Replace current image src and alt with new element alt and src
				codeBlock.innerHTML = codeHTML.replace(image, selector.getAttribute('src')).replace(alt, selector.getAttribute('alt'));
			}
		}
	}	
</script>