Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS][CSS]Zmiana obrazka po zmianie w <select>
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
PaKoS
Witam,
Czy macie jakieś propozycje co do zmiany obrazka o ID np. "obraz"
za każdem razem po wybraniu innego pola w <select..>?

Ja zrobiłem to tak:
<select...>
<option onClick="obraz.src='tu_src'" value="nazwa">nazwa2</option>
itd itd
ale to jeśli działa doskonale np. w Mozilli nie działa już pod IE a powinno mimo wszystko działać wszędzie smile.gif

Propozycje? snitch.gif
revyag
A po co do każdego optiona dawać zdarzenie ?
Nie lepiej tak: ?
Kod
function swap(sel) {
    document.getElementById("obrazek").src = sel.options[sel.selectedIndex].value;
}

  1. <select onchange="swap(this)"></select>
igors
Cytat(revyag @ 22.09.2006, 08:45:22 ) *
A po co do każdego optiona dawać zdarzenie ?
Nie lepiej tak: ?
Kod
function swap(sel) {
    document.getElementById("obrazek").src = sel.options[sel.selectedIndex].value;
}

  1. <select onchange="swap(this)"></select>

Skrypt dobry, działa.

Pytanie można by zaliczyć właściwie do przedszkola, bo, jak zaraz będziecie mogli zobaczyć, takie ono jest:
w <option> mam value 1.jpg, 2.jpg, 3.jpg itd, ale chcę, żeby w obrazku "obrazek" rsc wyglądało tak: ../images/1.jpg itd. I mam problem z wpleceniem tego ../images/ w document.getElementById("obrazek").src = sel.options[sel.selectedIndex].value;. Próbowałem np. tak: document.getElementById("obrazek").src = '../images/'.sel.options[sel.selectedIndex].value;, ale nie dało rady. Próbowalem łączyć to spacją, przecinkiem i też nic. Gdy po "=" zostawię samo "../images/", wtedy zawartość obrazek.src zmienia się, ok, ale obrazek się nie pokazuje, bo nie może (../images/ nie jest obrazkiem, ale, jak ktoś już pewnie zauważył, folderem).

Tego problemu mogłoby nie być, gdybym do value dał od razu pełen adres obrazka, ale nie mogę. Cóż.

Z góry dziękuję i pozdrawiam.

//edit
revyag, dzięki. Ale ze mnie n00b. ;P
revyag
Łańcuchy znaków łączy się znakiem +
Joy-machine
a ładniej:
  1. var selects = getElementByClassName('class_name','select',document);
  2. for(i=0;i<selects.length;i++){
  3. selects[i].onchange = function(){ swap(this); }
  4. }


gdzie: getElementByClassName => google.com

Ogólnie polecam stosowanie tej funkcji, oszczędzamy nazewnictwo (bo stosujemy i do JS i do CSS) a sama funckja działa na: class="klasa1 klasa1".
lopik
A co to ma być : getElementByClassName() blink.gif
Pierwsze zrób / znajdź taką funkcję, a potem napisz, bo w DOM jej nie ma.
Wiem, że taka jest do znalezienia, ale jak coś piszesz to może pisz dokładnie.

A ten twój dopisek w stylu: "gdzie: getElementByClassName => google.com" , może oznaczać, że nie wiesz jak taką funkcję napisać, w ogóle to nudne te twoje dopiski w tym stylu dotyczące w google.

Tak jak tu napisałeś, "gdzie $ => google.com" sprawdź pierwsze co google znajdzie po wpisaniu znaczka dolara, a potem daj ten "twój dopisek".


Gorzej będzie jak jakiemuś adminowi/modowi też te dopiski się w końcu znudzą (;
Joy-machine
Cytat
A ten twój dopisek w stylu: "gdzie: getElementByClassName => google.com" , może oznaczać, że nie wiesz jak taką funkcję napisać
biggrin.gif biggrin.gif biggrin.gif

Cytat
Tak jak tu napisałeś, "gdzie $ => google.com" sprawdź pierwsze co google znajdzie po wpisaniu znaczka dolara, a potem daj ten "twój dopisek".


Trzeba być super lamą żeby w google wpisać sam znaczek $, rozumiem że sprawdziłeś co się stanie...


Cytat
Gorzej będzie jak jakiemuś adminowi/modowi też te dopiski się w końcu znudzą (;

Prędzej adminowi znudzą się Twoje glupie docinki nie na temat. Poza tym odsyłam tam, gdzie wszystko jest, nie wsadzam bzdur wyssanych z palca.
nospor
@Joy-machine przestan w koncu podawac jakies funkcje z prototype bo zaraz jednak adminowi sie to znudzi.
Jesli jednak juz sie decydujesz, to podaj laskawie od razu ze to z takiej a takiej biblioteki a nie sie wymadrzasz i odsylasz tylko do googli. Tak jak z tym $. Ktos chce uzywac document.getElementById to niech uzywa, nie kazdy musi zaraz z prototype korzystac i wiedziec co oznacza twoje $.

Cytat
Trzeba być super lamą żeby w google wpisać sam znaczek $, rozumiem że sprawdziłeś co się stanie...
a niby co mial wpisac? Sam tak napisales:
Cytat
gdzie $ => google.com

Prosze mi tu uzytkownikow nie wyzywac od lam, jest to najzwyklejsze ublizanie innemu uzytkownikowi i jest karane na forum
Joy-machine
Dla wszystkich "daj mi, zrób mi" wkleję link do świetnego kursu JS:

http://kolos.math.uni.lodz.pl/~marczak/Inf.../Ai/kurs_js.pdf

Nie dostałem tego na gwiazdkę, znalazlem na google!!!

Forum ma pomagać, ja też chętnie pomogę, ale podawanie wszystkiego na tacy to nie pomoc, a wychowywanie pokolenia "daj mi, zrób mi". Spadam stąd.
boria
a ja mam jescze male pytanie:
ten skrypt powoduje zmiane obrazka po wybraniu odpowiedniej opcji, ale co zrobic zeby zanim uzytkownik cos wybierze pojawial sie jakis obrazek??
Joy-machine
Boria poczytaj o darzeniach (events) - gdzie, jak i kiedy się wykonują.
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.