HTML5 banner en include code creëren
Ferdi R
02/06/2016 17:53:26Chrome 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:
ad.js
banner.php
Nu heb ik het volgende bedacht, integratie:
Code (php)
1
2
2
<div id="ad-div" data-adid="F-0001" data-pub="0001"></div>
<script src="http://www.website.nl/banner/js/ad.js"></script>
<script src="http://www.website.nl/banner/js/ad.js"></script>
ad.js
Code (php)
1
2
3
2
3
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>';
}
document.getElementById('ad-div').innerHTML = '<iframe src="http://www.website.nl/banner/html5/banner.php" data-adid="'+adid+'" id="ad-00"></iframe>';
}
banner.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
<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>
Er zijn nog geen reacties op dit bericht.