[JS] Zmiana stanu warstwy bez buttona Opcje

[JusticeItself]

Witam.

Mam małe (niemałe) utrapienie, ponieważ próbuję napisać fragment kodu w samym JS, który będzie ukrywał i pokazywał warstwę, wiem to już było, ale nie znalazłem nigdzie tego czego potrzebuję, czyli grafiki zamiast buttona. Grafika po kliknięciu:

1. zmieni się w drugą (rotacja grafik JPEG: "pokaż" i "ukryj")
2. zmieni widocznośc warstwy.

Nie proszę o cały kod, chociaż o pomoc, nakierowanie.

Z góry dziękuję

Ps. We właściwym dziale ja to napisałem?

Ten post edytował JusticeItself 2.02.2008, 12:39:11

[lord_t]

Z grafiką robi się analogicznie:

[HTML] pobierz, plaintext 
<img id="ukryj" src="obrazekUkryj" onclick="funkcja_ukrywajaca_warstwe();">
<img id="pokaz" src="obrazekPokaz" onclick="funkcja_pokazujaca_warstwe();">
[HTML] pobierz, plaintext 

W funckji_ukrywajcej musisz dodać linijki:

[HTML] pobierz, plaintext 
document.getElementById("ukryj").style.display="none";
document.getElementById("pokaz").style.display="inline";
[HTML] pobierz, plaintext 

a w fun. pokazujacej:

[HTML] pobierz, plaintext 
document.getElementById("ukryj").style.display="inline";
document.getElementById("pokaz").style.display="none";
[HTML] pobierz, plaintext 

1. To może być pomocne: http://forum.php.pl/index...
2. inline można zamienić na block; w zależności od potrzeb.

[JusticeItself]

Ah, no tak, ale nie wspomniałem, że na stronie będzie zawsze niewiadoma liczba tych elementów (grafika + poniżej pole z zawartością ukrytą), jeśli będzie 5 takich zestawów, to 5 razy powtórzy się ID grafik i warstw do ukrycia. Od razu napiszę, że chcę to zamontować jako znacznik ukrywajacy treść w poście w systemie forum IP.Board.

Ten post edytował JusticeItself 2.02.2008, 15:24:07

[lord_t]

No to obrazki maja tak wygladac w kodzie:

[HTML] pobierz, plaintext 
<img id="ukryjN" src="obrazekUkryj" onclick="funkcja_ukrywajaca_warstwe(N);">
<img id="pokazN" src="obrazekPokaz" onclick="funkcja_pokazujaca_warstwe(N);">
[HTML] pobierz, plaintext 

gdzie N zastępuje liczba od 0 w górę. To wstawianie liczb trzeba zrealizować oczywiście w kodzie php.

Linijki w kodzie funkcji pokazujacej:

[HTML] pobierz, plaintext 
document.getElementById("ukryj"+numer).style.display="inline";
document.getElementById("pokaz"+numer).style.display="none";
[HTML] pobierz, plaintext 

Dla drugiej funkcji analogicznie.

Dodatkowo funkcja ukrywająca i fun. pokazująca muszą przyjmować parametr numer. Przykład:

[HTML] pobierz, plaintext 
function funkcja_pokazujaca_warstwe(numer)
{....}
[HTML] pobierz, plaintext 

[erix]

To wstawianie liczb trzeba zrealizować oczywiście w kodzie php.

A po co, jeśli doskonale poradzi sobie z tym JS?

Jeśli korzystasz z jakiegoś frameworka w JS, to będzie prościej, ale ogólna idea:

Przechodzisz przez tablicę z obrazkami (document.images) i za pomocą jakichś warunków (np. indexOf dla ID, klasy, czy czego tam jeszcze chcesz) sprawdzasz, czy to ten obrazek, co trzeba. Potem, kawałek kodu:

Obrazki mają nazwy - załóżmy - obrazek_1, obrazek_2.

W pętli sprawdzasz, czy id obrazka ma frazę obrazek_1. Jeśli nie, to continue, a dalej:

Kod

document.images[i].onclick = function(){ funkcja_ukrywajaca_warstwe(this.id.split('_')[1]); }

Pisane z palca, ale nie trzeba maltretować PHP.