<!-- HTML code for the ad -->
<div id="ad-container" style="position: fixed; bottom: 0; right: 0; width: 200px; height: 200px;">
<a href="https://www.example.com/ad-page" id="ad-link" aria-label="Advertisement" target="_blank">
<img src="/ad-image.jpg" alt="Advertisement" style="max-width: 100%; max-height: 100%;">
</a>
</div>
<!-- JavaScript code for the ad -->
<script>
// Get a reference to the ad link and container
var adLink = document.getElementById('ad-link');
var adContainer = document.getElementById('ad-container');
// Add a click event listener to the ad link
adLink.addEventListener('click', function(event) {
// Track the click using analytics code or ad platform code
// ...
// Open the ad destination URL in a new tab
var adUrl = adLink.href;
window.open(adUrl, '_blank');
// Prevent the default behavior of the link
event.preventDefault();
});
// Hide the ad container after 10 seconds
setTimeout(function() {
adContainer.style.display = 'none';
}, 10000);
</script>
In this example, we're using the same click-through ad code as before, but we're wrapping it inside a div element with an id of ad-container. We're also using inline styles to position the container at the bottom-right corner of the page, and setting its width and height to 200px.
The JavaScript code is similar to before, but we're also adding a setTimeout() function to hide the ad container after 10 seconds. This is useful to prevent the ad from being too intrusive or annoying to users.
Note that the exact positioning and styling of the ad container may vary depending on your website's layout and design. You can adjust the bottom, right, width, and height values of the style attribute to position the ad container where you want it, and adjust the max-width and max-height values of the style attribute for the img element to ensure the ad image fits within the container.