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

Sprememba ozadja

Koda: 
<script type="text/javascript">
function ozadje(a)
{
telo.style.backgroundImage="url(slike/ozadje" + a + ".jpg)"
}
</script>

<form action="akcija.html">
<p><input class="gumb" type="button" onclick="ozadje(1)"
style="background-image:url(slike/ozadje1.jpg)"></p>
<p><input class="gumb" type="button" onclick="ozadje(2)"
style="background-image:url(slike/ozadje2.jpg)"></p>
<p><input class="gumb" type="button" onclick="ozadje(3)"
style="background-image:url(slike/ozadje3.jpg)"></p>
</form>

<style type="text/css" >
body
{
background-repeat:repeat-y
}
.gumb
{
height:50px;
width:100px;
border: 3px solid silver;
}
</style>

<body id="telo">
Izgled v
brskalniku:

Izberi ozadje
Razlaga: Funkcija postavi za ozadje eno izmed slik z zaporednimi števili od 1 do 3. Ustrezno sliko izbere s pomočjo gumbov na strani, ki imajo za svojo ozadje eno izmed teh treh slik. Ob kliku na posamezen gumb ze zažene funkcija ozadje(a), pri čemer a predstavlja eno izmed števil od 1 do 3. Funkcija nato spremeni ustrezno ozadje s pomočjo ukaza telo.style.backgroundImage="url(slike/ozadje" + a + ".jpg)"

gor Gor     e-gradiva     JavaScript     Primeri     Slogovne predloge

SERŠ Maribor : Strokovna gimnazija : 2006 : matej Ekart