IZBORNIK HOME FORUM ACCESS EXCEL WORD KAZALO
   
  Kazalo - sadržaj tema
  Uvod u JavaScript
1 Načini ispisa
2 Kontrola prozora
2a Sintaxa
3 Kontrola događaja
3a Kontrola toka
4 Detekcija podataka
5 Efekti s podlogom
6 Efekti s tekstom
7 Efekti sa slikom
8 Razna rješenja
9 Rad s formama
10 Razni primjeri
11 Ključne riječi
12 Događaji
   
 
AutoCAD tutoriali

-

-
 

Adsense sponzor



JS - JAVA SCRIPT za početnike i neznalice - JAVA SCRIPT for dummies

JS - BACKGROUND EFEKTI
(efekti s podlogom)

Search This Web Site

Adsense sponzor






SLUČAJAN IZBOR PODLOGE

Ako želimo izbjeći monotoniju neke web stranice koja nema potrebe za čestim ažuriranjem, možemo pokušati ovo:

<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    var podloga1 = "js-bkgr1.jpg"
  /* definiranje mogućih podloga */
    var podloga2 = "js-bkgr2.jpg"
    var podloga3 = "js-bkgr3.jpg"
    var slucajnibroj=Math.round(5*Math.random())
/* slučajni broj između 0 i 5 */
    if (slucajnibroj < 2)
/* izbor podloge ovisno o slučajnom broju */
        podloga = podloga1
    else if (slucajnibroj < 4)
        podloga = podloga2
    else
        podloga = podloga3
    document.write('<BODY BACKGROUND="'+podloga+'">')
/* postavka podloge */
    //-->
</SCRIPT>
</BODY>
</HTML>

U prilogu js-vje5a.html   možete vidjeti kako to izgleda u praksi...


VREMENSKI BACKGROUND

Želite li da se podloga mijenja ovisno o dobu dana, pokušajte s ovim:

<HTML>
<HEAD></HEAD>
<BODY>
Primjer izbora boje podloge (BODY BGCOLOR) ovisno od doba dana....<br>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    var datum = new Date();
/* prihvat tekućeg datuma u varijablu */

    var sati = datum.getHours();
/* prihvat tekućeg sata u varijablu */
    if (sati > 4 && sati < 7){
        document.write('
<BODY BGCOLOR="steelblue" TEXT="#FFFFFF">Sada je između 5 i 6 sati ujutro...')
    }
    if (sati > 6 && sati < 9){
        document.write('
<BODY BGCOLOR="skyblue" TEXT="#FFFFFF">Sada je između 7 i 8 sati ujutro...')
    }
    if (sati > 8 && sati < 18){
        document.write('
<BODY BGCOLOR="deepskyblue" TEXT="#FFFFFF">Sada je između 9 i 17 sati...')
    }
    if (sati > 17 && sati < 20){
        document.write('
<BODY BGCOLOR="orange" TEXT="#FFFFFF">Sada je između 18 i 19 sati...')
    }
    if (sati > 19 && sati < 22){
        document.write('
<BODY BGCOLOR="orangered" TEXT="#FFFFFF">Sada je između 20 i 21 sat...')
    }
    if (sati > 21 || sati < 5){
        document.write('
<BODY BGCOLOR="black" TEXT="#FFFFFF">Sada je iznoćmeđu 22 i 4 sata u...')
    }
    //-->
</SCRIPT>
</BODY>
</HTML>

U prilogu js-vje5b.html možete vidjeti kakva je podloga definirana za ovo doba dana...


FADE BACKGROUND

A sada da se malo poigramo s bojama podloga!

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function
definirajARRAY(n) {
        this.length = n;
        for(var i = 1; i <= n; i++)
            this[i] = 0;
        return this;
    }
    hexa = new definirajARRAY(16);
    function
dajEfektFADE(sr, sg, sb, er, eg, eb, step) {
        for(var i = 0; i < 10; i++)
            hexa[i] = i;
        hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
        hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
        for(var i = 0; i <= step; i++) {
            postaviBGCOLOR(
                Math.floor(sr * ((step-i)/step) + er * (i/step)),
                Math.floor(sg * ((step-i)/step) + eg * (i/step)),
                Math.floor(sb * ((step-i)/step) + eb * (i/step)));
        }
    }
    function
hexBrojBOJE(i) {
        if (i < 0)
            return "00";
        else if (i > 255)
            return "ff";
        else return "" + hexa[Math.floor(i/16)] + hexa[i%16];
    }
    function
postaviBGCOLOR(r, g, b) {
        var hr = hexBrojBOJE(r), hg = hexBrojBOJE(g), hb = hexBrojBOJE(b);
        document.bgColor = "#"+hr+hg+hb;
/* postavka boje podloge! */
    }
    //-->
</SCRIPT>
</HEAD>

<BODY>
<H3>Primjer postupne promjene boje podloge....</H3>
<SCRIPT LANGUAGE="JavaScript">
    <!--
   dajEfektFADE(0,128,128,192,220,192,50);
       /* brojevi u dajEfektFADE znače, redom: */
        /*     - prva tri: - početna boja  (RGB) */
        /*     - druga tri: - završna boja (RGB) */
        /*     - zadnji:-   korak promjene (RGB) */
    //-->
</SCRIPT>
</BODY>
</HTML>

U prilogu js-vje5c.html možete provjeriti kako ova "igra boja" izgleda u praksi...

 


CENTRIRANA SLIKA U PODLOZI (samo Internet Explorer)

Na kraju, evo još jednog zgodnog efekta podloge, ali vrijedi samo za Internet Explorer:

<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT language="JavaScript1.2">
    if (document.all)
        document.body.style.cssText="background:white
url(js-bkgIE.jpg) no-repeat fixed center center"
</SCRIPT>
<H3>Primjer podloge u obliku centrirane slike...</H3>
(Vrijedi samo za Internet Explorer!)
</BODY>
</HTML>

U gornjem primjeru koristimo mogućnost definiranja CSS stila u JavaScriptu!
Opcije u document.body.style.cssText... znače:

  • document.body.style.cssText - da definiramo parametre za BODY sekciju dokumenta
  • background: - da definiramo parametre podloge dokumenta
  • white - bijela boja podloge
  • url(js-bkgIE.jpg) - slika za podlogu
  • no-repeat - da se ne "ponavlja"
  • fixed - da bude fiksirana
  • center - da bude centrirana u sredini prozora

U prilogu js-vje5d.html imate kod gornjeg primjera...

 

Adsense sponzor






 Ova web stranica koristi COOKIES - COPYRIGHT - 2006 - 2016 - IvanC - ic.ims.hr