e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Prikaz slik

Koda:
<script type="text/javascript">
slika=1
var klic1
function gremo()
{
levo=0
document.getElementById("plast1").src=" slika"+(slika)+".jpg"
slika++
slika=slika%5
document.getElementById("plast2").style.clip="rect(0px 0px 0px 0px)"
document.getElementById("plast2").src=" slika"+(slika)+".jpg"
klic1=setInterval("plast1()",5)
}

function plast1()
{
if (levo<301)levo=levo+3
else {clearInterval(klic1);setTimeout("gremo()",2000)}
document.getElementById("plast2").style.clip=
"rect(0px " + parseInt(4*levo/3) + "px " +levo + "px 0px)"
}
</script>

<style type="text/css">
img
{
position: absolute;
left:250px;
top: 20px;
width: 400px;
height: 300px;
}
</style>

<img id="plast1" src="slika1.jpg" alt="slika" />
<img id="plast2" src="slika1.jpg" alt="slika" />
Izgled v
brskalniku:

Ogled v novem oknu

Razlaga: Ob kliku na zgornje besedilo se požene metoda gremo(), ki najprej nastavi na dve prekrivajoči div plasti prvi dve sliki in nato še nastavi dogodek, ki vsakih 5 milisekund požene metodo plast1(). Metoda plast1() vsakič, ko steče, razkrije dodatne 3 vrstice in 4 stolpce točk naslednje slike. Ko razkrije celotno sliko, prekine dogodek, ki jo zaganja vsakih 5 milisekund, ter ustvari nov dogodek, ki pokliče spet prvotno funkcijo čez 2 sekundi. Postopek se ponavlja, dokler ne pride do konca slik, nakar prične spet pri prvi sliki.

SERŠ Maribor : Strokovna gimnazija : 2006 : Tadej Seme