Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Obraze w/przy select
Forum PHP.pl > Forum > Przedszkole
kamilos809
Witam,
Moim problemem jest kod <select>. Znaczy wiadomo, kod prosty jednak nie do końca, gdyż chciałbym najlepiej żeby był obrazek przy tekście w select, czyli
np.
  1. <select name="test">
  2. <option value="wartość"><img src"obrazek.jpg">Nazwa 1</option>

Niestety jak wiadomo to tak nie działa. Widziałem różne kody jQuery, jednak nijak nie umiem ich użyć, za każdym razem nic takiego nie widać jak pokazują na przykładzie.

Znalazłem prostszy sposób, który też mnie satysfakcjonuje, jednak nie do końca.
  1. <select name="test" onchange="document.getElementById('avatar').src=id">
  2. <option value="test1.gif">Test 1</option>
  3. <option value="test2.gif">Test 2</option>
  4. <img id="avatar" src="nie_wybrano.gif" />

W tym momencie wyświetla mi się nie do końca po mojej myśli, jednak już coś jest.
Tylko niestety jako, że to jest część formularza... tu zaczyna się problem. Kod wykonuje dużo porównań z tym select'em. Problemu nawet nie byłoby, gdyby nie to, że planuję dać jeden obrazek do 3 tych samych opcji, a ten select z użyciem "value" wysyła ścieżkę do obrazka, która będzie taka sama i wszystkie późniejsze porównania z wartością tego selectu będą krótko mówiąc bez sensu.

Da się to jakoś przerobić, żeby wartość wysyłana była wartością niezależną do wyświetlanego obrazka obok?
trueblue
Pokaż jak to robisz pierwszym sposobem.

Co do drugiego. Zamiast w atrybucie value, przechowuje w atrybucie np. data-src, czyli <option value="1" data-src="obrazek.gif">aaaa</option>
Musisz poprawić funkcję dla zdarzenia onChange.
kamilos809
heh... nic nie dało...

zamieniam <option value="obrazek.jpg">Tekst</option>
na <option data-src="obrazek.jpg">Tekst</option>

nic się nie zdarzyło.

Zacząłem kombinować z
<select name="test" onchange="document.getElementById('avatar').src=value">
zamieniałem na:
<select name="test" onchange="document.getElementById('avatar').src=data-src">
oraz
<select name="test" onchange="document.getElementById('avatar').data-src=value">

to również nie przynosi efektów.

co do poprzedniego sposobu, wyczaiłem kod ze strony: http://designwithpc.com/Plugins/ddSlick
zaimportowałem plugin .js wg zasad importowania, tzn sekcja head i takie tam.
Nieważne jakbym nie próbował tego użyć, za każdym razem nic.

trueblue
Heh.
Pewnie, że nic nie dało, bo niepoprawnie pobierasz atrybut data-src i wstawiasz, wcześniej miałeś bardzo źle, teraz masz źle.
http://www.w3schools.com/jsref/met_element_getattribute.asp
Powinieneś pobrać atrybut data-src i wstawić go jako atrybut src do obrazka.
Kombinowanie tu nic nie da, pomyśl co, gdzie, i kiedy chcesz zmienić.
kamilos809
poddaje się. Nie wiem jak ten kod zrobić, żeby uzyskać pożądany efekt.
Mógłby ktoś podać przykład "na chłopski rozum" brany? bo chciałbym to zrozumieć, a jak na razie błądzę w kółko i efektu brak
tomi1985
http://designwithpc.com/Plugins/ddSlick#demo

tu masz wszystko to czego Ci trzeba wink.gif
kamilos809
taa...
Jakbym jeszcze miał pojęcie jak to uruchomić...
Już kiedyś próbowałem bawić sie jQuery i efekt był ten sam, czyli po prostu brak efektu.
tomi1985
kolego ale przecież tam masz instrukcje co i jak po kolei zrobić...
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.