I've been experimenting with adding an Adblock detector that will show one image when detecting Adblock and another when not detecting it. The challenge lies in the fact that CSS controls the display and formatting of the image. Is there a way to manipulate the image displayed by CSS via JavaScript?
html:
<div id="adblockFrame">
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.getElementById('adblockFrame').innerHTML="<img src='images/ImageHolderno.png' alt='no adblock' />";
}
else
{
document.getElementById('adblockFrame').innerHTML="<img src='ImageHolderyes.png' alt='Adblock detected!' />";
}
Please note that the image placeholders are empty and do not serve any purpose since the image is defined by CSS.
CSS:
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
background-image:url(../images/minibg1.png);
background-repeat:no-repeat;
margin-left:10px;
}