Site hosted by Angelfire.com: Build your free website today!

JavaScript Animatsioon

CSS JavaScript'i abil saab luua animeeritud pilte.

JavaScript suudab pilte vahetada v. muuta üks sündmus teiseks.

Näited:

 red_dot.gif Animeeritud nupp   red_dot.gif Animeeritud nupp - 2 

Allpool olevas näites kasutatakse pilti veebilehe lingina. Lisame sellele "MoseOver" ja "MouseOut" sündmused mis omakorda käivitavad JavaScript funktsiooni. Funktsioon omakorda vahetab pilte omavahel.

Html kood näeb välja selline:

<a href="http://www.minusait.com" 
target="_blank">
<img border="0" 
alt="Vaata minu kodulehte!"
src="pilt.gif" name="p1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>

Pane tähele. Pildile on lisatud nimi (name="p1"). See lisatakse JavaScript koodi selleks, et skript vastava pildi ülesse leiaks.

"MouseOver" sündmus ütleb brauserile, et kursoriga üle pildi liikudes peab ta käivitama JavaScript funktsiooni mis omakorda vahetab ühe pildi teise vastu.

"MouseOut" sündmus ütleb brauserile, kui kursor ligub pildilt ära siis peab ta käivitama teise JavaScript funktsiooni. See funktsioon lisab originaal pildi uuesti tagasi.

JavaScript kood näeb välja selline:

  <script type="text/javascript">
function mouseOver()
{
document.b1.src ="pilt.gif";
}
function mouseOut()
{
document.b1.src ="pilt_2.gif";
}
</script>

Funktsioon mouseOver() vahetab pildi "pilt_2.gif" originaalpildi vastu.

Funktsioon mouseOut() vahetab pildi "pilt.gif" tagasi.

Terve kood on selline:

        <html>
      <head>
    <script type="text/javascript">
function mouseOver()
{
document.p1.src ="pilt_2.gif";
}
function mouseOut()
{
document.p1.src ="pilt.gif";
}
    </script>
      </head>
        <body>
<a href="http://www.minusait.com" target="_blank">
<img border="0" alt="Vaata minu kodulehte!"
src="b_pink.gif" name="p1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
  </a>
    </body>
      </html>

Kuidas teha kirjutusmasina teksti?

Lehekülje alguses on kasutatud JavaScript'i mis loob kirjutusmasina teksti. Kellele seda vaja on ei oska öelda kuid kellel on siis järgmiste näpunäidete varal saab asja selgeks.
Kõigepealt kopeeri kood ja "seivi" nimega type.js. Kood ise on selline:

brk - tekstis, ridade jätkamiseks, ei saa kasutada tavalist <br /> märgist. Selleaseme kasuta spetsiaalset märki ('~'). Kui mõni klaviatuur seda märki ei tunne siis lihtsalt kopeeri.

resetTime - selleks, et teks käivituks uuesti, tuleb nulli (0) asemele kirjutada mingi muu number ning vastava arvu sekundite järel toimub taaskäivitus.

Nüüd kirjuta dokumendi "head" sektsiooni järgmine lausung:

<script type="text/javascript" src="type.js">
</script>

Selleks, et määrata kus skript tööle hakkab on vaja dokumendi "body" sektsiooni kirjutada nii:

<div id="kt"></div>

Juhul kui veebidokumendi stiil on Css'i abil määramata v. kui tahad teksti eraldi kujundada, saab seda teha vastava stiililehe abil.
Oletame, et soovid oma kirjutusmasina tekstile mingisugust kujundust. Näiteks sellist:

#tw {
width : 300px;
height : 360px;
border : 1px solid #cccccc;
background-color :#f5f5f5;
padding : 5px;
font-family : "arial",courier,monospace;
font-size : 16px;
}

"Seivi" see fail nimega kt.css ja dokumendi "head" sektsiooni kirjuta nii:

<link rel="stylesheet" href="kt.css" type="text/css">