JavaScript to jzyk skryptowy. Kodujac w JavaScript zyskujesz dynamiczne efekty na swojej stronie WWW.
Zobacz rwnie:
LINKI:
Przepisy
Gry dla dzieci
W tym miejscu znajdziesz odnoniki do stron znajomych oraz do stron tematycznie powizanych z tematyk mojego serwisu. Strona Internetowa GRY ONLINE
Skrypty zmienia zawarto strony w zalenoci od wyboru opcji w polu select formularza. Poszczeglne teksty umieszczone s w osobnych warstwach, ktre przyjmuj odpowiednio warto display none lub block;
Wybierz z listy warstw:
Poniszy zapis naley umieci w sekcji head z znaczniku script.
<script type="text/javascript">
function podmiana(co) {
var ile = document.getElementById("wybor").options.length;
for(var i=1; i<=ile; i++) {
var ktora = "w"+i;
if(ktora == co) {
document.getElementById(ktora).style.display = "block";
}
else if(ktora != co) {
document.getElementById(ktora).style.display = "none";
}
}
}
</script>
W ten sposb umiecilimy funkcj odpowiedzialnon za zmian wartoci display dla poszczeglnych warstw.
Nastpnie umie deklaracj stylw CSS dotyczc warstw (w sekcji head). Style su do zmiany wygldu tekstu, ta itp.
<style type="text/css">
#w1 {
display: block;
}
#w2,#w3,#w4 {
display: none;
}
</style>
A wywoanie funkcji w polu select formularza wygada tak:
<form id="formularz" action="#">
<select name="wybor" id="wybor" onChange="podmiana(this.value);">
<option value="w1">Tre nr 1</option>
<option value="w2">Tre nr 2</option>
<option value="w3">Tre nr 3</option>
<option value="w4">Tre nr 4</option>
</select>
</form>
Warstwy wstawiamy w taki sposb:
<div id="w1">Zawarto bloku tekstowego nr 1.</div>
<div id="w2">Zawarto bloku tekstowego nr 2.</div>
<div id="w3">Zawarto bloku tekstowego nr 3.</div>
<div id="w4">Zawarto bloku tekstowego nr 4.</div>
UWAGA
Po zakodowaniu strony internetowej zawsze sprawd czy prawidowo wywietla si we wszystkich popularnych przegldarkach internetowych (np.: Internet Explorer, Mozilla Firefox, Opera).
Copyright © Atom 2006