Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Zmiana stanu warstwy bez buttona
Forum PHP.pl > Forum > Przedszkole
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ę smile.gif

Ps. We właściwym dziale ja to napisałem?
lord_t
Z grafiką robi się analogicznie:
  1. <img id="ukryj" src="obrazekUkryj" onclick="funkcja_ukrywajaca_warstwe();">
  2. <img id="pokaz" src="obrazekPokaz" onclick="funkcja_pokazujaca_warstwe();">


W funckji_ukrywajcej musisz dodać linijki:
  1. document.getElementById("ukryj").style.display="none";
  2. document.getElementById("pokaz").style.display="inline";

a w fun. pokazujacej:
  1. document.getElementById("ukryj").style.display="inline";
  2. document.getElementById("pokaz").style.display="none";


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.
lord_t
No to obrazki maja tak wygladac w kodzie:

  1. <img id="ukryjN" src="obrazekUkryj" onclick="funkcja_ukrywajaca_warstwe(N);">
  2. <img id="pokazN" src="obrazekPokaz" onclick="funkcja_pokazujaca_warstwe(N);">

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:
  1. document.getElementById("ukryj"+numer).style.display="inline";
  2. document.getElementById("pokaz"+numer).style.display="none";

Dla drugiej funkcji analogicznie.

Dodatkowo funkcja ukrywająca i fun. pokazująca muszą przyjmować parametr numer. Przykład:
  1. function funkcja_pokazujaca_warstwe(numer)
  2. {....}
erix
Cytat
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.