Here's an example of a floating click-through ad that appears on the bottom-right corner of the page
<!-- 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.