Mala škola Java Script-a sa primerima - efekti u radu sa tekstom i grafikom

HIJERARHIJA TEKSTA

Java Scriptom možemo tekstu dati zanimljive efekte u vidu graduiranja teksta:
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</HEAD>
<BODY>
<H3>Primer HIJERARHIJE teksta.</H3>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</BODY>
</HTML>
Funkcija dajGradaciju() se poziva sa parametrima:
    dajGradaciju(željeni tekst, veličina slova, vrsta slova, osnovna boja)
Zadnji broj u funkciji dajGradaciju() predstavlja osnovnu RGB boju i može biti:
    0 - za crveni tekst
    1 - za zeleni tekst
    2 - za plavi tekst
Datoteka pr41.htm

SCROLL SADRŽAJA STATUSNE LINIJE

Sadržaj statusne linije dokumenta moguće je "skrolovati": Pogledajte primer
<html>
<head><title>Skrolovanje poruke u statusnoj liniji</title>
<script LANGUAGE="JavaScript">
poruka = "Skrolovanje poruke u statusnoj liniji"; /*sadrzaj stringa statusne linije */
poruka = "...          ..." + poruka; 
pos = 0;  /*tekuca pozicija stringa poruka */
function Skroluj() {
   window.status = poruka.substring(pos, poruka.length) + poruka.substring(0, pos);
   /*string je sastavljen od dela poruke od pozicije pos do kraja + nastavljen delom poruke
     od pocetka do pozicije pos*/
   
   pos++;
   if (pos > poruka.length) pos = 0;
   /* ako je tekuca pozicija veca od duzine poruke, vratiti se na pocetnu poziciju 0*/
   
   window.setTimeout("Skroluj()",200);
   /*nakon 2 sekunde pozovi funkciju ispisa skrol poruke */
   
}
Skroluj();
</script>
</head>
<body>
<h1>Skrolovanje poruke u statusnoj liniji</h1>
Pratite tekst u statusnoj liniji!!!
</body>
</html>
SCROLL SADRŽAJA DOKUMENTA

Sadržaj HTML dokumenta moguće je "skrolovati":
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT language="JavaScript">
    var tekucaPozicija=0, alt=1, pozicija1=0, pozicija2=-1
    function inicijaliza(){
        startujSkroliranje()
    }
    function startujSkroliranje(){ /* poziv skrola u vremenskim razmacima od 10 milisekundi */
        setInterval("skrolProzor()",10)
    }
    function skrolProzor(){ /* funkcija skrolovanja */
        if (document.all)
            temp=document.body.scrollTop
        else
            temp=window.pageYOffset
        if (alt==0)
            alt=1
        else
            alt=0
        if (alt==0)
            pozicija1=temp
        else
            pozicija2=temp
        if (pozicija1!=pozicija2){
            if (document.all)
                tekucaPozicija=document.body.scrollTop+1
            else
                tekucaPozicija=window.pageYOffset+1
            window.scroll(0,tekucaPozicija)
        }
        else{
            tekucaPozicija=0
            window.scroll(0,tekucaPozicija)
        }
    }
    window.onload=inicijaliza /* pokretanje skrolovanja */
</SCRIPT>
<CENTER>
<H3>Primer skrolovanja dokumenta...</H3>
<IMG SRC="bkgr1.jpg"><BR>
<SCRIPT>
    for (var i = 1; i <=15; i++) /* da se bi ne upisivao ručno sav tekst! */
       document.write("<P>Ovo je " + i + ". red probnog teksta u dokumentu...")
</SCRIPT>
</CENTER>
</BODY>
</HTML>
Datoteka pr42.htm

ZUMIRANJE TEKSTA

<HTML>
<HEAD>
<SCRIPT Language="Javascript">
    
</SCRIPT>
</HEAD>
<BODY onLoad="start()" onUnload="stop()">

<DIV ID="text" STYLE="position: absolute; left: 50; top: 100"></DIV>
<LAYER NAME="text" left=4 top=80></LAYER>
<H4>Primer zumiranja teksta</H4>
<HR>
</BODY>
</HTML>

MENI SLIKA

Moguće je posetiocu ponuditi meni slika, bez potrebe da se stranica ponovno učitava:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM>
    <IMG NAME="mojaSlika" SRC="bkgr1.jpg" BORDER=0 WIDTH=200 HEIGHT=200><HR WIDTH=50%>
    <SELECT NAME="meniSlika" SIZE=3 onChange ="if (verzijaBrowsera(3.0,4.0)) mojaSlika.src=form.meniSlika.options[form.meniSlika.selectedIndex].value;">
        
        <OPTION VALUE="bkgr1.jpg">probna slika 1
        <OPTION VALUE="bkgr2.jpg">probna slika 2
        <OPTION VALUE="bkgr3.jpg">probna slika 3
    </SELECT>
</FORM>
</CENTER>
</BODY>
</HTML>

Datoteka pr45.htm

POMERANJE SLIKA

Ako korisniku želite dati mogućnost da Vaše slikama pomera po ekranu:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>

<div id="s" style="position:absolute;left:50;top:100;">
    <img src="bkgr1.gif" name="s">
</div>
<div id="d" style="position:absolute;left:50;top:150;">
    <img src="bkgr2.gif" name="d">
</div>
<div id="c" style="position:absolute;left:100;top:100;">
    <img src="bkgr3.gif" name="c">
</div>
<div id="h" style="position:absolute;left:100;top:150;">
    <img src="bkgr1.gif" name="h">
</div>
<H4>Ove slicice mozete pomerati mišem!</H4><HR ALIGN="left" WIDTH=50%>
</BODY>
</HTML>

Datoteka pr46.htm

ZUMIRANJE SLIKE

Na kraju, evo još jednog zanimljivog efekta - zumiranje slike:
<HTML>
<HEAD>
<SCRIPT language="javascript">
    function zumiraj(i){
        if (i == 1) { /* povećanje slike */
            document.slika1.width = document.slika1.width * 1.20;
            document.slika1.height = document.slika1.height * 1.20;
        }
        else { /* smanjenje slike */
            if (document.slika1.width >30 && document.slika1.height > 30) {
                document.slika1.width = document.slika1.width * 0.80;
                document.slika1.height = document.slika1.height * 0.80;
            }
        }
    }
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="75%" border="0" align="center">
    <TR>
        <TD height="300">
            <DIV align="center"><IMG SRC="js-img2.jpg" NAME="slika1"></DIV>
        </TD>
    </TR>
    <TR>
        <TD>
            <DIV align="center">
                <HR WIDTH=50%>
                <INPUT TYPE="button" VALUE="Povećaj" onClick="javascript:zumiraj(1)">
                <INPUT TYPE="button" VALUE=" Smanji " onClick="javascript:zumiraj(2)">
            </DIV>
        </TD>
    </TR>
</TABLE>
</BODY>
</HTML>

PRIMER POMERANJA TEKSTA ZA MIŠEM

<HTML><HEAD>
<STYLE>.spanstyle {
    COLOR: black; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</HEAD>
<BODY onload="pomeriSlova()" style="OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%">
<SCRIPT LANGUAGE="JavaScript">
    
</SCRIPT>
</BODY>
</HTML>

Datoteka pr48.htm