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

Visibility & display

Koda: 
<style>
#nevidna
{
visibility:hidden;
}
#skrita
{
display:none;
}
</style>

<script type="text/javascript">

function vidna()
{
if(document.getElementById("nevidna").style.visibility=="visible")
  }
  document.getElementById("nevidna").style.visibility="hidden"
  }
else document.getElementById("nevidna").style.visibility="visible"
}


function prikazi()
{
if (document.getElementById("skrita").style.display=="inline")
  {
  document.getElementById("skrita").style.display="none"
  }
else document.getElementById("skrita").style.display="inline"
}


</script>

<h2 onclick="vidna()">visibility:hidden</h2>
<p><img src="slike/xfoto2.jpg" alt="slika" />
<img src="slike/xfoto3.jpg" alt="slika" id="nevidna" />
<img src="slike/xfoto4.jpg" alt="slika" />
<img src="slike/xfoto5.jpg" alt="slika" />

<h2 onclick="prikazi()">display:none</h2>
<p><img src="slike/xfoto2.jpg" alt="slika" />
<img src="slike/xfoto3.jpg" alt="slika" id="skrita"/>
<img src="slike/xfoto4.jpg" alt="slika" />
<img src="slike/xfoto5.jpg" alt="slika" /></p>
Izgled v
brskalniku:

Klikni na naslova

visibility:hidden/visible

slika slika slika slika

display:none/inline

slika slika slika slika

Razlaga: Z dogodkom onclick, se nam bo prikazala slika, ko bomo kliknili z miško na naslov. V prvem primeru se bo slika prikazala v že rezerviranem mestu, v drugem pa se bo sliki dodeljen prostor, kjer bi slika morala biti.

gor Gor     e-gradiva     JavaScript     Primeri

SERŠ Maribor : Strokovna gimnazija : 2004 : Darko Milanovič