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 - EFEKTI S GRAFIKOM

Search This Web Site

Adsense sponzor






ISTEK VIDLJIVOSTI SLIKE

Ako želimo da neka slika bude vidljiva samo do određenog datuma, evo kako to možete riješiti:

<HTML>
<HEAD>
<SCRIPT>
    <!--
    var slika = '
<IMG SRC="js-img1.jpg">'
    var datum = new Date()
    function
provjeraIsteka(datumIsteka){
        var datIsteka = new Date(datumIsteka)
        if (datum.getTime() <= datIsteka.getTime()) {
            document.write(slika);
            document.write("
<HR>slika će biti vidljiva do dana:<BR>" + datIsteka);
        } else {
            document.write("
<HR>slika je bila vidljiva do dana:<BR>" + datIsteka);
        }
    }
    //-->
</SCRIPT>
</HEAD>
<BODY>
<H4>Primjer slike koja je vidljiva samo do određenog datuma...</H4>
<SCRIPT>
    /* datum do kada želite da slika bude vidljiva! */
    provjeraIsteka("December 31, 2010")
</SCRIPT>

</BODY>
</HTML>

U prilogu js-vje7a.html   možete vidjeti kako to izgleda u praksi... (primjer vidljive slike do određenog datuma)
U prilogu js-vje7a1.html   možete vidjeti kako to izgleda u praksi... (primjer vidljive slike istekao datum)


IZBORNIK SLIKA

Želite li korisniku ponuditi izbornik slika, bez potrebe da se stranica ponovno učitava, evo rješenja:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function
verzijaBrowsera(Netscape, Explorer) { /* provjera verzije browsera, zbog razlika u prikazu */
        if ((navigator.appVersion.substring(0,3) >= Netscape && navigator.appName == 'Netscape') ||
                (navigator.appVersion.substring(0,3) >= Explorer && navigator.appName.substring(0,9) == 'Microsoft'))
            return true;
        else return false;
    }
-->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM>
    <IMG NAME="
mojaSlika" SRC="js-img1.jpg" BORDER=0 WIDTH=200 HEIGHT=200><HR WIDTH=50%>
    <SELECT NAME="
izbornikSlika" SIZE=3 onChange ="if (verzijaBrowsera(3.0,4.0)) mojaSlika.src=form.izbornikSlika.options[form.izbornikSlika.selectedIndex].value;">
        <!-- ovdje definiramo slike za izbornik -->
        <OPTION VALUE="js-img1.jpg">probna slika 1
        <OPTION VALUE="js-img2.jpg">probna slika 2
        <OPTION VALUE="js-img3.gif">probna slika 3
    </SELECT>
</FORM>
</CENTER>
</BODY>
</HTML>

U prilogu js-vje7b.html možete vidjeti kako takav izbornik funkcionira...


POMJERANJE SLIKA

Ako korisniku želite dati mogućnost da se poigra s vašim slikama i pomjera ih po ekranu, napravite to ovako:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
N = (document.all) ? 0 : 1;
var ob;

function
MD(e) { /* servisira pritisak na tipku miša */
    if (N) {
        ob = document.layers[e.target.name];
        X=e.x;
        Y=e.y;
        return false;
    }
    else {
        ob = event.srcElement.parentElement.style;
        X=event.offsetX;
        Y=event.offsetY;
    }
}

function
MM(e) { /* servisira pomjeranje miša s pritisnutom tipkom */
    if (ob) {
        if (N) {
            ob.moveTo((e.pageX-X), (e.pageY-Y));
        }
        else {
            ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
            ob.pixelTop = event.clientY-Y + document.body.scrollTop;
            return false;
        }
    }
}

function
MU() { /* servisira otpuštanje tipke miša */
    ob = null;
}

if (N) {
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
//-->
</SCRIPT>
</HEAD>

<BODY>
<!-- upis početnih pozicija slika (left/top) i naziva slika -->
<div id="s" style="position:absolute;left:50;top:100;">
    <img src="
js-mov1.gif" name="s">
</div>
<div id="d" style="position:absolute;left:50;top:150;">
    <img src="
js-mov2.gif" name="d">
</div>
<div id="c" style="position:absolute;left:100;top:100;">
    <img src="
js-mov3.gif" name="c">
</div>
<div id="h" style="position:absolute;left:100;top:150;">
    <img src="
js-mov4.gif" name="h">
</div>
<H4>Ove sličice možete pomjerati mišem. Pokušajte!</H4><HR ALIGN="left" WIDTH=50%>
</BODY>
</HTML>

U prilogu js-vje7c.html možete provjeriti kako ova "igra sa slikama" izgleda u praksi...


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-img3.gif" 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>

U prilogu js-vje7d.html možete u praksi isprobati ovo zumiranje...

 

Adsense sponzor






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