Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jquery - zmiana obrazka po kliknięciu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
drax
Mam 3 obrazki. Chciałbym żeby po kliknięciu na jednego zmieniał się na drugi, później przy kliknięciu na drugi na trzeci, i później pierwszy.

Takim kodem wstawiam obrazek:

  1. <a href="#"><img class="image" id="image" src="images/contact/1.jpg"></a>

[JAVASCRIPT] pobierz, plaintext
  1. $(document).ready(function() {
  2. $(".image").click(function(){
  3. $(".image").attr("src", "images/contact/2.jpg").$(".image").attr("class",'image1');
  4. });
  5. $(".image1").click(function(){
  6. $(".image1").attr("src", "images/contact/3.jpg").$(".image1").attr("class",'image2');
  7. });
  8. $(".image2").click(function(){
  9. $(".image2").attr("src", "images/contact/1.jpg").$(".image2").attr(".class",'image');
  10. });
  11. ;});
[JAVASCRIPT] pobierz, plaintext


mój kod js.

Gdzie popełniam błąd? Skrypt zmienia mi tylko jedno zdjęcie.

Edit:
miałem taką mapę we flashu: http://www.bogaccy.pl/swf/mapa.swf
chciałem zrobić ją w js.

Jeśli kod nie jest zrozumiały, to mam nadzieję, że wiecie co chciałem osiągnąć. wink.gif
wookieb
Kiedy robisz to
[JAVASCRIPT] pobierz, plaintext
  1. $(".image1").click(function(){
[JAVASCRIPT] pobierz, plaintext

To elementu o tej klasie jeszcze nie ma.
Napisz to porządnie, określ jakąś tablicę z listą zdęć i po prostu przeskakuj do kolejnego zdjęcia. Możliwości realizacji jest mnóstwo, podrzuciłem Ci tylko pomysł.
Gribo
nie rób tego na click tylko wykorzystaj toggle. http://api.jquery.com/toggle-event/
drax
[JAVASCRIPT] pobierz, plaintext
  1. function() {
  2. var Images = new Array ('2.jpg', '3.jpg','1.jpg');
  3. $('.image').toggle(function(){ $('.image').attr('src' , 'images/contact/' + Images)});
  4. }
  5.  
[JAVASCRIPT] pobierz, plaintext

O coś takiego chodziło?
nadal nie działa. Jestem trochę zielony, jeśli chodzi o js, więc potrzebowałbym jeszcze jakieś nakierowanie;)
wookieb
google -> javascript tablice
everth
Może pomoże
[JAVASCRIPT] pobierz, plaintext
  1. Array.prototype.next = function() {
  2. elem = this.shift();
  3. this.push(elem);
  4. return elem;
  5. }
  6. //użycie
  7. tablica = ['fdsfdd','fsfsfddf','dddd','yyy','dddd']
  8. tablica.next(); //kolejne elementy
[JAVASCRIPT] pobierz, plaintext

drax
Nie wiem za bardzo co z tym kodem zrobić. Tzn wiem jak to działa mniej więcej, ale nie wiem jak to użyć w stosunku do mojego kodu.
Nic nie napisaliście czy jest ok, czy nie.
Gribo
no utwórz sobie klasę .images i po kliknięciu użyj funkcji toggle i napisz sobie 3 funkcje które będą podmieniać ścieżkę do obrazka czyli SRC
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.