IZBORNIK HOME FORUM ACCESS EXCEL WORD KAZALO

HOME

   
1 Uvod
2 Pokretanje Front Page 2003
3 Izgled radnog prozora
4 Tekstualni izbornici
5 Alatne trake
6 Pripreme za izradu
7 Kreiranje prve stranice
8 Umetanje tablica i raspored
9 Oblikovanje tablica i stranice
10 Umetanje logotipa i slika
11 Umetanje linkova
12 Umetanje INLINE-frame
13 Umetanje Bookmarka
14 Kreiranje stranice bez Inline Frame
15 Kreiranje pomoću čarobnjaka
16 Upload na server
17 Iskoristite Photoshop
18 Što je CSS ?
19 Video prezentacija izrade web stranice
20 Kružni rotator bannera
   
 

.

 
 

MICROSOFT Front Page 2003

KRUŽNI    HTML ROTATOR BANNERA

Search This Web Site

Adsense sponzor






CONTINUE HTML ROTATOR BANNERS  (HTML KRUŽNI BANER ROTATOR - izmjena slika)

Ovaj kružni banner rotator (NAPOMENA: nije banner random) je kontinuiran i izmjenjuje se svakih 5 sekundi i vrti banere u krug redoslijedom. (Poželjno je ne stavljati više od 6 - 10 bannera - slika).

Kružni rotator bannera pogodan je za HTML stranice kojih nema puno ali se može iskoristiti i na više *.html stranica. Kao što znate problem kod HTML stranica je samo održavanje jer neke promjene morate raditi stranicu po stranicu ako želite da se promjene izvrše na svim stranicama, što kod PHP i ASP stranica nije problem.

Ako se radi o HTML stranicama koje se editiraju jedna po jedna potrebno je isplanirati sve web stranice i postaviti code na svaku HTML stranicu a potom u datoteci "magicimage.js" vršiti konfiguraciju i promjene naziva image (slika) i linkova za dotične slike.
Dakle sa jednog mjesta vršimo promjene slika kao i linkova u kružnom rotatoru bannera (nema potrebe ručno editirati svaku HTML stranicu).

Za kvalitetan rad potrebno je slijedeće:

1. Za ovaj slučaj kada želite sa jednog mjesta upravljati sa svim potrebnim faktorima za kvalitetan rad bannera potrebno je da u rootu vaše domene kreirate folder (mapu) "graphics" u koju ćete smještati slike bannera (GIF, JPG).

 

Primjer naziva slika
- slika1.gif
- slika2.gif
- slika3.gif
- slika4.gif
- slika5.gif
- slika6.gif

Adsense sponzor




2. U HEAD svih web stranica staviti ovaj code ispod
Dakle, ako tek planirate kreirati web stranice potrebno je u svaku HTML web stranicu u prostor (tablicu) gdje želite pozicionirati kružni rotator banera postaviti ovaj code ispod.
Ako ste pak već izradili web-site sa više desetaka *.HTML stranica tada je potrebno pomoću nekog programa umetnuti ovaj code na način da automatski umetnete code bez otvaranja svih *.html stranica. (pogledajte: "Zamjena teksta u više HTML datoteka odjednom bez editiranja"). Neki od programa su Ultraedit, Notepad++, Dreamweaver, itd….

Dakle ovaj code SCRIPTA 1, umetnite u HEAD sekciju

<script
language="JavaScript"
src="http://www.vasa-domena.com/magicimage.js"
type="text/javascript">
</script>


3. U BODY na mjesto gdje želimo prikazivati bannere postavite ovaj code.
Dakle ako želite da Vam se banneri prikazuju na dnu web stranice u svaku HTML-web stranicu pri dnu kreirajte jednu tablicu koju centrirajte po širini da vam se banneri prikazuju u sredini a potom ovaj code umetnite u nju.

Dakle ovaj code SCRIPTA 2, umetnite u BODY sekciju

<div id="MagicImage"></div>

4. Datoteku "magicimage.js" pozicionirati u root (folder gdje se nalazi i HTML datoteka u kojoj se prikazuju-rotiraju banneri)

U datoteci "magicimage" po potrebi editirati slijedeće (istu možete otvoriti sa programom koji radi sa JS (npr: Macromedia Dreamweaver ili Notepad ili Notepad++ itd…)

- var ImageCount= 6; // 6 bannera za izmjenjivanje
- var ImageDelay= 5000; // izmjenjivanje se vrši svakih 5 sekundi
- var LinkTarget= "_self" // (za otvaranje u novom prozoru browsera upisati "_blank"



OVO je kompletan code datoteke magicimage.js a istu datoteku sa primjerom downloadajte
KRUŽNI ROTATOR BANNERA

Dio koda koji možete mijenjati označen je bold.

########## code datoteke magicimage.js ########

var ImageLoad =
[
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/one.jpg', 'Blue Flower' ], // ['URL to linked page', 'URL to image', 'Caption under picture'] //
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/two.jpg', 'Distant Rainstorm' ], // The caption is not required and may be left blank like this: //
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/three.jpg', 'Raindrops on a Leaf' ], // ['URL to linked page', 'URL to image', ''] //
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/four.jpg', 'Jungle Dream' ], // Add as many images as you like seperated by commmas //
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/five.jpg', 'Daisies' ], // Almost ALL errors are caused by the url or path being wrong //
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/six.jpg', 'Sunflowers' ] // The LAST image declaration does NOT have a comma after it //
];


var ImageCount = 6; // ***** Change this to the total number of images loaded above ***** //
var ImageDelay = 5000; // ***** Set this to the delay interval desired. 5000 = 5 seconds. //
var LinkTarget = "_self" // ***** Defines where you want linked page to open. _self, _blank, _top, etc //
var ImageIndex = 0; // DO NOT ALTER //
var FirstLoad = 0; // DO NOT ALTER //
var QuickStartID = 0; // DO NOT ALTER //
var htmlString = "" // DO NOT ALTER //
var randomnumber = 0; // DO NOT ALTER //

// This function rotates the banner //
function ImageChange()

{

htmlString = '<center>';
htmlString = htmlString + '<font face = "Verdana" size="2">'; // Font and Font Size for caption may be changed here //
htmlString = htmlString +'<a target="';
htmlString = htmlString + LinkTarget;
htmlString = htmlString + '" href="';
htmlString = htmlString + ImageLoad[ImageIndex][0];
htmlString = htmlString + '"><img border="0" src="'; // Image border size may be changed here //
htmlString = htmlString + ImageLoad[ImageIndex][1];
htmlString = htmlString + '"></a><br>';
htmlString = htmlString + ImageLoad[ImageIndex][2];
htmlString = htmlString + '</font>';
htmlString = htmlString + '</center>';

document.getElementById('MagicImage').innerHTML = htmlString;

ImageIndex = Math.floor(Math.random()*ImageCount);

if(FirstLoad == 0) // Determins if this is the first time function has run. //
{
SlowFinish();
}

}
// End Funtion //

// This function ensures first banner is displayted without a delay //
function QuickStart()
{
QuickStartID=setInterval("ImageChange()", 1000);
}
// End Funtion //

// This function sets display rate to user defined speed //
function SlowFinish()
{
clearInterval(QuickStartID);
FirstLoad = 1;
setInterval("ImageChange()", ImageDelay);
}
// End Funtion //

QuickStart()

########## kraj code ###############

Ovdje želim napomenuti da u ovakvom slučaju pažljivo mijenjate dio koda koji se odnosi na smještaj slika bannera.
Isto tako ako želite (a naravno da u ovom slučaju želite) izostaviti dio koda koji se odnosi na naziv slike ispod bannera. Stoga obrišite nazive slika.

Primjer SA nazivom ispod slike
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/one.jpg', 'Blue Flower' ],

Primjer BEZ nazivom ispod slike
['http://www.domena.com/', 'http://www.vasa-domena.com/graphics/one.jpg', '' ],


Dakle, jedan kratki rezime:

1. HEAD sekcija svih HTML web stranica => scripta 1
2. BODY sekcija svih HTML web stranica => scripta 2
3. Kreirajte Folder "graphics" u root na serveru i u njega postavite slike bannera istih dimenzija
4. Datoteku magicimage.js (koju editirate) postavite u root na web serveru


Kada sve to postavite na web server i nakon nekog vremena trebate ukloniti neki banner ili dodati jednostavno otvorite i editirajte datoteku magicimage.js.
U njoj izmijenite nepotrebne nazive bannera i linkove.

Postoji još jedna mogućnost. Sve slike imenujte standardnim imenom 1.gif, 2.gif, 3.gif, 4.gif … pa samo nove preimenujete na taj naziv i kopirate u folder "graphics" => overwrite, i ostaje Vam samo izmijeniti dio koda koji se odnosi za link na domenu povezan sa dotičnom slikom.

Ako imate npr: 6 slika i želite da Vam se samo prvih tri rotira jednostavno upišite broj 3 u ovom dijelu koda
- var ImageCount= 3; // 3 bannera za izmjenjivanje

Nadam se da ćete shvatit kako funkcionira ovaj kružni rotator bannera
   (download primjera OVDJE)
Ako želite pogledajte i Online Generator za rotator bannera > Javascript Banner Rotator Generator <

Ako posjedujete vlastiti phpBB 2x forum tada pogledajte kako se postavlja kružni rotator bannera na phpBB forumu.

Adsense sponzor



Adsense sponzor






Ova web stranica koristi COOKIES - COPYRIGHT 2008 - 2018 - IvanC - ic.ims.hr