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

Položaj elementa

Koda:
<script type="text/javascript">

polozaj=0

function premakni()
{
document.getElementById("slika").style.position="relative"
polozaj = polozaj + 50
najvec=document.body.clientWidth/2
if (polozaj>najvec) polozaj=0
document.getElementById("slika").style.left=polozaj
}
</script>

<p>Klikaj na sliko!</p>

<img id="slika" src="slike/xfoto0.jpg" alt="Klikaj!!"
onclick="premakni()" />
Izgled v
brskalniku:

Klikaj na sliko!

Klikaj!!
Razlaga: Slika ima nastavimo pozicijo slike na relativno glede na pozicijo na strani. Po kliku na sliko se položaj, v slogovni predlogi CSS vrednost left, poveča za 50 pikslov. S spremenljivko najvec je določena meja, do katere se lahko premika slika. Če je pozicija slike večja od te največje določene, se resetira na 0, torej spet postavi se v začetno stanje.

SERŠ Maribor : Strokovna gimnazija : 2004 : Benjamin Šaler