My website has an advertisement section that works fine for most users. However, if a user has an ad-blocker enabled, the advertisement doesn't display and instead, an empty area appears on the site.
To address this issue, I plan to add a background image below the ad, encouraging users to consider enabling ads on this specific site. This image will give users the choice to support the site they are visiting without being intrusive. By using simple CSS with background-image, I can implement this effectively.
One challenge I face is that ads take some time to load, around a second for certain users. I want to ensure that the background image does not appear before the ad has a chance to load. Therefore, I aim to change the background of the div after a brief delay, such as 2-3 seconds.
Below is my attempt at a JavaScript function:
<script type="text/javascript">
function show_banner(){
document.getElementById('banner').style.background="url('images/banner_bg.png')";
}
function show_banner_delay(){
setTimeout("show_banner()", 3000);
}</script>
Here is the HTML code I am using:
<div id="banner-wrap">
<div id="banner">
<!--Google AdSense Code Here-->
</div>
</div>
I believe I may be missing something simple in the syntax, but I am struggling to identify the issue. Any assistance would be greatly appreciated!
THANK YOU FOR YOUR HELP!!!