HTML5 banner en include code creëren

Door Ferdi R op 02-06-2016 17:53

2.064 views

Chrome gaat flash niet meer ondersteunen en daarom wil ik een beetje met html5 banners experimenteren. Daarom de vraag hoe zouden jullie een html5 banner opzetten en includen, wat zal volgens jou het beste manier zijn.

Nu heb ik het volgende bedacht, integratie:


	    <div id="ad-div" data-adid="F-0001" data-pub="0001"></div>
	    <script src="http://www.website.nl/banner/js/ad.js"></script>

ad.js


function maakad(adid){
	document.getElementById('ad-div').innerHTML = '<iframe src="http://www.website.nl/banner/html5/banner.php" data-adid="'+adid+'" id="ad-00"></iframe>';
}

banner.php


<!DOCTYPE html>
<html lang="nl-NL">
<head>
	<meta charset="UTF-8" />

	<title>Banner</title>

	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />
    
    <style>
	.banner         { position: relative; color: #FFFFFF; background: #21561a; overflow: hidden; }
	.banner h1      { position: absolute; font-weight: 300; top: -40px; right: 10px; font-size: 2em; z-index: 4; text-shadow: 0 0 6px #000000, 0 0 6px #000000; }
    </style>

</head>
<body>
	<div class="banner">
		<h1>ik ben een banner</h1>
	</div>
	
</body>
</html>