Okolje za predolged oglasnih pasic – bannerjev

Pri izdelavi oglasnih pasic oziroma bannerjev si je potrebno velikokrat predstavljati, kako bo oglasna pasica delovala, kot celota na samih spletnih straneh. Ker lahko s sliko povemo več kot z besedami je najbolje pripraviti okolje za testiranje oglasnih pasic.

Za izdelavo okolja potrebujemo nekaj znanja HTMLja, CSSja, Javascripta(zaradi odstranitve klika v IE brskalnkih ob uporabi swfobject-a) in poljubnega programa za obdelavo slik. Najprej potrebujemo “print screen” željene spletne strani. Sliko razdelimo na dva dela. Prvi del je ozadje strani oz. “background”, drugi del pa izgled celotne strani.

Nato sledi programiranje v HTML programskem jeziku, kjer določimo ozadje strani in vsebinski del izbrane strani. V CSSju določimo “margin-u” in “padding-u” vrednost nič, tako se sliko, ki ima vsebinski del poravna ob rob brskalnika.

CSS koda
<style type="text/css">
<!--
* {margin:0; padding:0;}
-->
</style>

Vstavimo Javascript kodo za swfobject in nastavimo atribute oziroma specifikacije za našo spletno pasico.

Swfobject koda
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("Pomagalnik_160-600.swf", "flashcontent", "160", "600", "6", "expressInstall.swf", flashvars, params, attributes );
</script>

Potrebno je dodati še DIV polje v katerem se predvaja oglas in nastaviti parametre, ki določajo lokacijo polja na sami spletni strani. Tako dobimo svoje okolje za predogled oglasnih pasic.

DIV koda
<div id=layer1 style="position:absolute; top:0; left:0; width:160; height:600; z-index:1; padding-left:830px; padding-top:305px;">
<div id="flashcontent">
<strong>You need to upgrade your Flash Player.</strong>
</div>
</div>

Pripravljeni vzorci za 24ur.com in Najdi.si.