Kontakt

Przykadowe skrypty:

Calling Cards to India

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

Zmiana treci w zalenoci od wyboru select

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:

Zawarto bloku tekstowego nr 1. Ten tekst wywietlany jest domylnie podczas wejcia na stron.
Zawarto bloku tekstowego nr 2. Ten tekst zosta wywietlony poniewa w polu wyboru wybrana zostaa pozycja nr 2. Kolejne warstwy mona wywietli w podobny sposb.
Zawarto bloku tekstowego nr 3. Tu tekst nr 3. Wysoko warstwy zmienia si automatycznie w miar przybywania tekstu. Skrypt mona wykorzysta w wielu sytuacjach.
Zawarto bloku tekstowego nr 4. Jeeli podoba Ci si skrypt moesz umieci go na wasnej stronie. Pamitaj, aby zamieci odnonik do tego serwisu.

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>

Teraz naley w sekcji body umieci warstwy w1, w2, w3 i w4 oraz formularz z polem select i wywoaniem funkcji podmiana().

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>


pediatra warszawa

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