[HTML][PHP]Funkcja sprawdzająca kliknięcie w obrazek Opcje

[ddr]

Czy mógłby ktoś naprowadzić mnie jak zrobić takie coś, że jak ktoś kliknie w dany obrazek w menu to zmienia mu się obrazek pod nim na inny.

[piku235]

Możesz to zrobić jedynie dzięki JavaScript, lub możesz użyć biblioteki jQuery, łatwiejsza w obsłudze.

[zavada]

[HTML] pobierz, plaintext 
<img src="ścieżka" onclick="javascript.document.getElementById("drugi").src='ścieżka drugiego obrazka po zmianie';"> // pierwszy obrazek
<img src="ścieżka drugiego obrazka przed zmianą" id="drugi"> // drugi obrazek
[HTML] pobierz, plaintext 

Masz gotowca... (IMG:style_emoticons/default/winksmiley.jpg)

PS. Wiem, że to nie ten dział na gotowce, ale cóż zrobić...

[ddr]

To nie działa albo ja coś źle robię. (IMG:style_emoticons/default/dry.gif)

[Wilu88]

To nie działa albo ja coś źle robię. (IMG:style_emoticons/default/dry.gif)

A oczywiście zamiast słowa "ścieżka" wpisałeś swoje ścieżki do obrazków?

[ddr]

Wilku, za takiego newbie to mnie nie miej (IMG:style_emoticons/default/tongue.gif) Jasne że wpisałem. Obrazki są tylko jak kliknę w obrazek to nic się nie dzieje.

Ten post edytował ddr 21.07.2010, 12:23:58

[thek]

Bo skrypt ma błąd. Zobacz na apostrofy w onclick. Objęcie parametru drugi w podwójne sprawia, że masz błąd składni. Zamień je na pojedyncze i powinno być ok.

[ddr]

Poprawiłem lecz dalej się nic nie dzieje (IMG:style_emoticons/default/blink.gif)

[HTML] pobierz, plaintext 
<img src="admin.png" onclick="javascript.document.getElementById('drugi').src='kupadmina.png'">
<img src="tlo.png" id="drugi">
[HTML] pobierz, plaintext 

Ten post edytował ddr 21.07.2010, 12:48:43

[zavada]

...i znalazłem drugi błąd w swoim skrypcie: zamiast kropki po javascript ma być dwukropek (IMG:style_emoticons/default/smile.gif)

[thek]

Bo ścieżka nie jest prawidłowa. kupaadmina.png to się bierze z powietrza? Walnij cały adres (począwszy od http://) i powiedz czy działa (IMG:style_emoticons/default/smile.gif)

[zavada]

Chyba raczej kupadmina (IMG:style_emoticons/default/smile.gif)

O ile robiłem kiedyś takie skrypciki to "http:// i dalsza ścieżka" nie była ważna, jeśli obrazek był w tym samym folderze, co plik html/skrypt.

Ten post edytował zavada 21.07.2010, 12:58:50

[thek]

Owszem, jeśli jest w tym samym + nie podmieniono obrazka na serwerze. Przeglądarka przy zmianie src zapewne uzyje obrazka z cache swojego. użycie http:// w adresie wymusza na niej żądanie do serwera by sprawdzić, czy zwróci jej status 304(Not modified) czy nie.

[ddr]

Działa pięknie, a teraz mam takie pytanko czy można jakoś na jednym z obrazków dodać coś a żeby na innych tego nie było? Pokaże wam to co zrobiłem - Klik I właśnie chciałbym aby działały te przyciski "wzór podania, płatności" i ten kalkulator, i moje pytanie w jakim miejscu mam to zakodować.

[Wilu88]

Ja bym na twoim miejscu zrobił to na zasadzie ukrytych divów i tylko przyciskami uaktywniałbym jeden, a resztę ukrywał, chyba będzie najprościej.

Tworzysz tyle divów ile będzie tam działów

[HTML] pobierz, plaintext 
<div style="display: none" id="dzial1">
 <p>Oto treść diva.</p>
</div>
 
<div style="display: none" id="dzial2">
 <p>Oto treść diva.</p>
</div>
[HTML] pobierz, plaintext 

itd.


A później każdemu przyciskowi w zdarzeniu onclick przypisujesz coś takiego:

Dla działu 1:

Kod

onClick="document.getElementById('dzial1').style.display='block';"

Dla działu 2:

Kod

onClick="document.getElementById('dzial2').style.display='block';"

itd.

Powinno zadziałać ale musiałbyś jeszcze potestować bo czasem okazuje się że wrazm z odkryciem jednego diva, trzeba ukrywać wszystkie inne

[ddr]

Wilu, bardzo mi pomogłeś, tylko jeszcze jedno bym się chciał spytać a mianowicie jak zrobić tak że jak pokazuje się jeden div to wszystkie inne się chowają?

[Wilu88]

Kod

onclick="document.getElementById('dzial1').style.display='block'; document.getElementById('dzial2').style.display='none'; document.getElementById('dzial3').style.display='none'; document.getElementById('dzial4').style.display='none'; document.getElementById('dzial5').style.display='none';"

Ten kod pokaże Ci dział1 a resztę powinien ukryć, o ile się gdzieś nie machnąłem (IMG:style_emoticons/default/biggrin.gif)