
By memoria
Have multiple site banners and don't want to create a code block for each one? This JavaScript adds a click event to each banner image that updates the bcg-code block with a new image url and alt text. The included CSS is very minimal and the HTML can be altered, though you should keep the bcg-banner and bcg-code wrappers as is. Images from Unsplash. Note: As the preview and code tabs here parse differently, the preview might not look correct, but the code to copy will be right.
<a href="//google.com">
<img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" />
</a>
<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><a href="//google.com"> <img src="//images.rpginitiative.com/uploads/monthly_2018_09/large.coffee-88x31.jpg.db67fd8c3ddc30853fcefbbf3e4ea114.jpg" alt="Coffee 88x31" /> </a></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>
By memoria
By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.