Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[js] zmiana obrazu po kliknięciu na niego.

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[js] zmiana obrazu po kliknięciu na niego.

Post 20.09.2007, 22:51:54

Na swojej stronie chciałem zrobić prostą galerię(bez możliwości powiększania). Po kliknięciu na obrazek(1.jpg), ładował się następny(w miejsce 1.jpg ładował się 2.jpg), po ponownym kliknięciu na niego ładował się następny(w miejsce 2.jpg ładował się 3.jpg) itd. Muszę tutaj zaznaczyć, że galeria tego typu jest łatwa w wykonaniu ale jak to bywa utrudniłem sobie, mianowicie zdjęcie miało się zmieniać po kliknięciu na obecnie zdjęcie, nie po kliknięciu na link.
Po 2 dniach, i dużej ilości popełnionych skryptów doszedłem do takiego momentu:
Kod: Zaznacz cały
<html>
<head>
<title>strona</title>   
<script language='javascript'>
var x=1;
function podmiana(x) {
if (x==1) {
document.images.obrazek="1.jpg";
var x=x+1;
}
if (x==2) {
document.images.obrazek="2.jpg";
var x=x+1;
}
if (x==3) {
document.images.obrazek="3.jpg";
var x=x+1;
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="podmiana(x);">
<img src="0.jpg" name="obrazek" id="obrazek"></a>
</body>
</html>


Skrypt nie działa pod żadną przeglądarką, z jakiego powodu to nie wiem. W całości napisany przez mnie(niestety).
Kod "w akcji" on-line: www.wojas.org/galeria
Chciałbym prosić o poprawienie błędu/ ewentualne sugestie.
Dziękuję z góry wszystkim.
K3ksik
Posty: 5
Dołączył(a): 20.09.2007

Post 20.09.2007, 22:53:27

Dopisz
Kod: Zaznacz cały
document.images.obrazek[color=red].src[/color]="1.jpg";

Jeśli chcesz bez linka to
Kod: Zaznacz cały
<img src="0.jpg" name="obrazek" id="obrazek" onclick="podmiana(x)">
Ostatnio edytowano 20.09.2007, 22:59:00 przez kuku, łącznie edytowano 1 raz
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 20.09.2007, 22:58:53

a w którym miejscu kodu? że mogę zapytać?:D
K3ksik
Posty: 5
Dołączył(a): 20.09.2007

Post 20.09.2007, 22:59:41

wszędzie gdzie masz odwołania do
Kod: Zaznacz cały
document.images.obrazek
dopisujesz to
Kod: Zaznacz cały
.src
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 20.09.2007, 23:03:59

już zmieniłem, w dalszym ciągu nie działa ;(
wojas.org/galeria
K3ksik
Posty: 5
Dołączył(a): 20.09.2007

Post 20.09.2007, 23:07:50

Brakuje klamry } zamykającej funkcję podmiana

PS. może coś takiego?
Kod: Zaznacz cały
<script>
var img=['http://forum.webhelp.pl/images/smiles/ball_plus.gif', 'http://forum.webhelp.pl/images/smiles/ball_minus.gif', 'http://forum.webhelp.pl/images/smiles/ball_on.gif']
img.i=0;
</script>
<img src="http://forum.webhelp.pl/images/smiles/ball_off.gif" name="obrazek" id="obrazek" onclick="if(img[img.i])this.src=img[img.i++]">
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 20.09.2007, 23:19:33

Zaiste zaczęło działać, chociaż x przyjmuje chyba wartość 3 i ładuje 3 obrazek, chociaż nie wiem dlaczego. www.wojas.org/galeria Skoro x na początku jest równe 1 i po kliknięciu dodaje do tej wartości następną 1(czyli już 2- ładowanie 2 obrazka) itd. w zasadzi to x powinno mieć wartość 0 i po pierwszym kliknięciu powinno ładować 1 obrazek, ale kiedy zmieniłem wartość var x=0; przestało działać.


Moment sprawdzę to co napisałeś.
Geniusz, naprawdę, nie wiem jak mam dziękować. Jestem bardzo wdzięczny za to :D:D Choć jeszcze nie zgłębiłem tajemnicy kodu cieszę się jego działaniem :D:D
K3ksik
Posty: 5
Dołączył(a): 20.09.2007

Post 20.09.2007, 23:27:01

Powinieneś użyć konstrukcji if..else if
Kod: Zaznacz cały
var x=1;
function podmiana(x) {
if (x==1) {
document.images.obrazek="1.jpg";
var x=x+1;
}
[color=red]else [/color]if (x==2) {
document.images.obrazek="2.jpg";
var x=x+1;
}
[color=red]else [/color]if (x==3) {
document.images.obrazek="3.jpg";
var x=x+1;
}
}
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 21.09.2007, 00:50:22

a nie byłoby prościej
Kod: Zaznacz cały
<html>
<head>
<title>strona</title>   
<script type="text/javascript" language='javascript'>
var x=1;
function podmiana() {
document.getElementById('obrazek').src = x+".jpg";
x++
if(x>3)x=0;
}
</script>
</head>
<body>
<img src="0.jpg" name="obrazek" onclick="podmiana()" id="obrazek">
</body>
</html>

jesli masz zmienną globalna x to po co ją przesyłać? jesli obrazki nazywają się 1.jpg 2.jpg to moj zapis jest krótszy. jesli będziesz miał nazwy typu zupa.jpg kwiatek.jpg to wystarczy wrzucić w tablice i też będzie chodziło :)
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Post 21.09.2007, 09:40:39

Wszystkim bardzo dziękuje :D Obie metody świetnie ;)
K3ksik
Posty: 5
Dołączył(a): 20.09.2007

Post 22.09.2007, 11:27:04

Dołączam się do tematu.

Mam kod w sekcji HEAD:
Kod: Zaznacz cały
<script type="text/javascript">
function podmiana(zmien) {
if (zmien == "black") {
document.images.obrazek.src="1214black.jpg";
}
else if (zmien == "gold") {
document.images.obrazek.src="1214gold.jpg";
}
else if (zmien == "coffee") {
document.images.obrazek.src="1214coffee.jpg";
}
else if (zmien == "brown") {
document.images.obrazek.src="1214brown.jpg";
}
else if (zmien == "normal") {
document.images.obrazek.src="1214.jpg";
}
}
</script>


oraz

Kod w sekcji BODY:
Kod: Zaznacz cały
<a href="javascript:void(0);" onclick="podmiana('black');">Black</a><br />
<a href="javascript:void(0);" onclick="podmiana('gold');">Gold</a><br />
<a href="javascript:void(0);" onclick="podmiana('coffee');">Coffee</a><br />
<a href="javascript:void(0);" onclick="podmiana('brown');">Brown</a>


Wszystko wygląda jasno. Jeśli naciśniesz link zmieni się obrazek w zdefiniowanym oknie. Na Firefoxie wszystko ładnie działa, ale na IE jest problem. Gdy się naciska, stary obrazek znika, a nowy w ogóle się nie pojawia.

Tutaj strona - http://www.goodin.pl , wchodzimy np. w buty damskie, następnie wybieramy but i tam można (w IE nie można) zmienić kolor.


Pomocy bo ja nie mam pomysłu co zrobić.


------------EDIT-----------
Doszedłem do wniosku, że IE odczytuje kod ale gdy naciskam wyboru koloru zdjęcie się nie ładuje. Natomiast kiedy naciskam na zdjęcie i biorę "pokaż obrazek", zdjęcie widać i przy następnym naciśnięciu na ten kolor obrazek będzie sie pokazywał. Tak więc to coś z ładowaniem obrazka w IE, ale jak to obejść?



------------EDIT2-----------
Dobra to może jakiś sposób, aby obrazki załadowały się w trakcie ładowania strony. A nie w trakcie naciśnięcia na link.
Moloch
Posty: 19
Dołączył(a): 02.06.2006

Post 22.09.2007, 17:21:37

Nikt nie zna sposobu na to aby obrazki załadowały się w trakcie ładowania strony. A nie w trakcie naciśnięcia na link????
Moloch
Posty: 19
Dołączył(a): 02.06.2006

Post 22.09.2007, 17:27:09

Znamy, tylko Ty nie poszukałeś
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 22.09.2007, 19:51:48

Działa, ale jak chce podejrzeć ponownie to pojawia sie połowa obrazka. Tak więc ponawiam problem.
Moloch
Posty: 19
Dołączył(a): 02.06.2006

Post 16.10.2008, 18:35:12

arogancik napisał(a):a nie byłoby prościej
Kod: Zaznacz cały
<html>
<head>
<title>strona</title>   
<script type="text/javascript" language='javascript'>
var x=1;
function podmiana() {
document.getElementById('obrazek').src = x+".jpg";
x++
if(x>3)x=0;
}
</script>
</head>
<body>
<img src="0.jpg" name="obrazek" onclick="podmiana()" id="obrazek">
</body>
</html>



mam pytanie : czy te obrazy moga jednoczesnie pelnic funkcje SUBMIT'a ?? dzieki za odpowiedz
gorys7
Posty: 9
Dołączył(a): 13.10.2008

Post 16.10.2008, 18:38:38

submit w sensie wysłania formy? jeśli o to chodziło to wystarczy
Kod: Zaznacz cały
document.getElementById('id_formy').submit();
i formularz sam sie wysle :)
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Post 16.10.2008, 18:48:09

wpisuje pytanie -> naciskam obrazek ( ktory ma wyslac pytanie) ->obrazek sie zmienia na inny jednoczesnie otrzymuje odpowiedz na pytanie..
tak bym chcial aby to wygladalo ;/
gorys7
Posty: 9
Dołączył(a): 13.10.2008

Post 16.10.2008, 19:10:45

chcesz wysłać request ajaxem do jakiegoś ksryptu który ma Ci zwrócić odpowiedź czy po prostu zmienić jeden tekst na drugi? bo nie za bardzo rozumie o co Ci teraz chodzi
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Post 16.10.2008, 19:24:54

wiec tak : to jest bot, i nie uzywam ajaxa. skrypt jest napisany w php ,ktory ma wyszukiwac odpowiedz z pliku .txt . do zadanego pytaniai.. do tego mam gifa w ktorym postac rusza ustami kiedy sie pojawia tekst. i chcialbym to zgrac jakos
gorys7
Posty: 9
Dołączył(a): 13.10.2008

Post 16.10.2008, 19:27:20

to w jaki spsób wysyłałes do tej pory pytania do tego bota w php? wysyłając cały formularz i przeładowując stronę lub ramkę?
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Następna strona

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Subskrypcja

Mamy 43452 zarejestrowanych użytkowników.
Najnowszy użytkownik: Content Lab


Nasi użytkownicy napisali:

  • 909685 wiadomości
  • w 236490 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)