Werbebanner als Easter Eggs – Mit Canvas

Einen Werbebanner möchte man als Webmaster immer prominent Platzieren. Doch leider bringt das manchmal nicht das gewünschte Ergebnis. Der User ist irgendwann genervt von den Bannern und nimmt sie auch gar nicht mehr richtig wahr (Bannerblindheit).

Warum also nicht mal die Werbung verstecken und wenn ein User diese findet zum Beispiel einen Coupon oder Ähnliches anzubieten? Dann sehen die Werbung zwar viele nicht, die die sie sehen, wundern sich aber und werden vielleicht schneller darauf klicken.

Als kleinen Einstieg, möchte ich heute mal einen Werbebanner erstellen, der erst mal gar nicht zu sehen ist. Fährt der User aber zufällig über die Stelle, wird der Banner nach und nach gemalt.

Als Basis hierzu dient ein Canvas-Element, welches als Hintergrundbild einen Werbebanner bekommt:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="300" height="250" 
      style="cursor:pointer;background-image:url('banner.gif')">
    </canvas>
  </body>
</html>

Mittels JavaScript übermalen wir nun den Hintergrund und fügen ein onclick ein, um den Banner auch anklickbar zu machen

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="300" height="250" 
      style="cursor:pointer;background-image:url('banner.gif')">
    </canvas>
    <script>
      var canvas = document.getElementById('canvas');  
      if (canvas.getContext){  
        var ctx = canvas.getContext('2d');  
        ctx.fillStyle = "#fff"
        ctx.fillRect(0,0,canvas.width,canvas.height);  
      }
      canvas.onclick = function(){
        window.location.href = "http://www.contentlion.de";
      }  
    </script>
  </body>
</html>

Das einzige, was jetzt noch fehlt, ist das Übermalen. Dies geht einfach über mousemove. Wir löschen dabei den Bereich, über dem die Maus gerade fährt:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="300" height="250" 
      style="cursor:pointer;background-image:url('banner.gif')">
    </canvas>
    <script>
      var canvas = document.getElementById('canvas');  
      if (canvas.getContext){  
        var ctx = canvas.getContext('2d');  
        ctx.fillStyle = "#fff"
        ctx.fillRect(0,0,canvas.width,canvas.height);  
      }
      canvas.onmousemove = function(e){
        ctx.clearRect(e.x - 5,e.y - 5,10,10);  
      }
      canvas.onclick = function(){
        window.location.href = "http://www.contentlion.de";
      }  
    </script>
  </body>
</html>

Und fertig ist unser Werbebanner! Diesen kann man dann zum Beispiel innerhalb eines Textes verstecken, damit die User auch darüberfahren. Mein Ergebnis ~~findet~~ sucht ihr hier

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Thomas Wagner schrieb am 13.05.2012:

Im Chrome klappt Dein Beispiel leider nicht.

Stefan schrieb am 14.05.2012:

Gefunden habe ich das Banner, gesehen leider nicht. (firefox 12.0 unter Win7)

Sabrina schrieb am 14.05.2012:

Hi, nette Idee... leider funktioniert er mit Mozilla Firefox nicht. In Chrome läuft er bei mir aber einwandfrei ;)

Stefan Wienströer schrieb am 14.05.2012:

Habt Recht, im Firefox läufts (noch) nicht. @Thomas: Hast du einen AdBlocker an?

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project