Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript] Zmiana obrazka.
Forum PHP.pl > Forum > Przedszkole
patryk20120
Witam winksmiley.jpg
mam pytanie, jak zrobić coś takiego, że jest obrazek i będzie on się zamieniał na inny, a ten inny na jeszcze inny i tak w kółko questionmark.gif
Wiem, ze na pewno ma to jakieś powiązanie z javą tongue.gif
HellRider
Po pierwsze JavaScript.

Więc tak ...

  1. var tablica = getElementsByTagName("img");
  2.  
  3. for (n=0; n<tablica.length; n++){
  4. tablica[n].setAttribute("src","folder/folder/plik.jpg");
  5. }


Patrz też, użycie setTimeout(); w JavaScript smile.gif
Maxik
Nie z Javą, a z JavaScriptem. http://www.malsup.com/jquery/cycle/
patryk20120
Wiem że Java a JavaScript to zupełnie inne języki, lecz chyba wiadomo o jakim mówię na forum o programowaniu stron tongue.gif
HellRider, a jak to zdjęcie wyświetlić w danym miejscu questionmark.gif Wstawić ten kod co podałeś w miejsce obrazka questionmark.gif // edit: już chyba wiem, muszę zdjęciu nadać name="img" questionmark.gif
Maxik, co to jest to co dałeś questionmark.gif
Maxik
Wejdź i zobacz, zmienia Ci obrazek co określony czas na inny, jak poszukasz to znajdziesz przykłady z menu do przełączania ręcznie tych obrazków.
HellRider
Nie, nie, nie! Jakie name="img" ?

getElementsByTagName pobiera do tablicy odniesienia do tagów, tu wybrałem IMG, bo chyba tak obrazki umieścisz.
W tym skrypciku masz podane: jak znaleźć tagi, jak zmienić ich źródło.
patryk20120
HellRider, nie rozumiem działania tego kodu tongue.gif gdzie tu jest coś odpowiedzialnego za zmianę obrazka np. k1.jpg na k2.jpg i tak w kółko co np. 5 sek tongue.gif questionmark.gif
HellRider
Dodałem komentarze smile.gif

  1. var tablica = getElementsByTagName("img"); // znajdź wszystkie tagi IMG na stronie, zapisz do tablicy
  2.  
  3. for (n=0; n<tablica.length; n++){ // dla ka&#380;dego elementu tablicy (tagu IMG)
  4. tablica[n].setAttribute("src","folder/folder/plik.jpg"); // ustaw atrybut src (&#378;ród&#322;o) na "folder/folder/plik.jpg" (twoja grafika)
  5. }


Jeśli nadasz tagowi IMG ID ( <IMG id="costam"> ) możesz użyć:

  1. var twoja_grafa = document.getElementById("costam");
  2. twoja_grafa.setAttribute("src","folder/folder/plik.jpg");


Metoda setAttribute ustawia atrybut, tutaj src, który jest atrybutem IMG ( <IMG src="plik.jpg"> ).
Już jak na tacy masz, połącz to z setTimeout (wygooglaj) i masz zmianę grafik.
patryk20120
Zrobiłem tak:
  1. var twoja_grafa = document.getElementById("costam");
  2. setTimeout('twoja_grafa.setAttribute('src','Obrazki/k2.jpg')',2000);

i w moim img dodałem id="costam", lecz obrazek się nie zmienia :/ czy cos zrobiłem źle questionmark.gif
HellRider
  1. var twoja_grafa = document.getElementById("costam");
  2. setTimeout("twoja_grafa.setAttribute('src','nowyplik.jpg')",5000);


1. Zagnieździłeś cudzysłowy, naprzemian używaj " oraz ' lub slashuj \' \"
2. Wywołaj ten skrypt i od razu sprawdź ścieżkę obrazka, po 5 sekundach zacznie wskazywać na nowyplik.jpg.

Wygodnie byłoby Ci napisać funkcję rotującą obrazek, np.:
  1. function zmien(element){
  2. // element to przekazany IMG, np. "costam", wywołanie zmien("costam");
  3. //tutaj sprawdzasz, który plik jest obecnie źródłem (src) i zmieniasz co X sekund w setTimeout
  4. }



Ja Ci już tego nie napiszę, bo za długo nie spałem i głupoty jeszcze popiszę smile.gif
mike
Cytat(patryk20120 @ 18.10.2008, 15:16:45 ) *
Wiem że Java a JavaScript to zupełnie inne języki, lecz chyba wiadomo o jakim mówię na forum o programowaniu stron tongue.gif
Nie, nie wiadomo. W Javie z powodzeniem jeszcze większym niż w PHP można pisać strony WWW i nie jest to nic dziwnego.
Proszę poprawić tag w tytule wątku. Jeśli poruszasz się po technologiach to korzystaj z ogólnie przyjętych nazw i nomenklatury a swniich skrutów wynikających z "wydaje mi się".
patryk20120
Ok sory, tag w temacie zmieniłem, a co do wątku to mam takie coś:
  1. function k1(){
  2. var cos = document.getElementById("costam");
  3. cos.setAttribute('src','Obrazki/k2.jpg');
  4. }
  5. function zmien(){
  6. var cos = document.getElementById("costam");
  7. var obrazek = cos.getAttribute("src");
  8. if( obrazek == "Obrazki/k1.jpg"){
  9. setTimeout('k1();', 5000);
  10. }
  11. }
  12.  


lecz nie działa to na IE(internet explorer) jest jakiś inny sposób na to, tak aby działało na IE questionmark.gif
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.