Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Zmiana obrazka po najechaniu / kliknięciu
Forum PHP.pl > Forum > Przedszkole
Elber
Witam, mam pytanko, jak najprostszym sposobem zrobić taki myk, że



po najechaniu na ten malutki obrazek wyświetli się on jako większy, tak jak teraz ten pierwszy obrazek z lewej to jest pokazany jako większy, i chodzi mi o to, że jak najadę kursorem albo kliknę na ten środkowy albo prawy malutki obrazek, to ten przeniesie się poniżej jako ten większy.

Mój kod tego wygląda tak:
  1. <div class="obrazek_maly">
  2. <img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" />
  3. <img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" />
  4. <img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" />
  5. </div>
  6. <img class="obrazek_duzy" src="foto/min/azalia_jap_arabesk.jpg" />
lobopol
poszukaj jquery gallery, setki wtyczek.
Jazi
  1. function zmien_obrazek(id) {
  2. var obrazek;
  3. switch(id) {
  4. case 1: obrazek = "azalia_jap_arabesk"; break;
  5. case 2: obrazek = "azalia_jap_fiener"; break;
  6. case 3: obrazek = "azalia_jap_eisprinzessin"; break;
  7. }
  8. document.getElementById('duzy_obrazek').innerHTML = "<img class="obrazek_duzy" src="foto/min/" + obrazek + ".jpg" />";
  9. }
  10.  
  11. <div class="obrazek_maly">
  12. <img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" onclick='zmien_obrazek(1);' />
  13. <img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" onclick='zmien_obrazek(2);' />
  14. <img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" onclick='zmien_obrazek(3);' />
  15. </div>
  16. <p id='duzy_obrazek'></p>


Użyty JavaScript. Pisane na szybko, mogą być błędy.
CuteOne
Wybierz drugi przykład z małym uproszczeniem - zamiast wstawić cały obrazek [który wywali błąd winksmiley.jpg ] wstaw tylko src
http://forum.php.pl/index.php?showtopic=120187
Elber
@CuteOne
tylko nie za bardzo wiem jak to podstawić pod mój kod w którym mam 3 obrazki i pole pod nimi ma wyświetlać większy.

  1. <div class="obrazek_maly">
  2. <img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" />
  3. <img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" />
  4. <img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" />
  5. </div>
  6. <img class="obrazek_duzy" src="foto/min/azalia_jap_arabesk.jpg" />
Jazi
Wersja lekko poprawiona z uwzględnieniem wersji od CuteOne [tylko tutaj działa na kliknięcia]:
  1. function zmien_obrazek(id) {
  2. var obrazek;
  3. switch(id) {
  4. case 1: obrazek = "azalia_jap_arabesk"; break;
  5. case 2: obrazek = "azalia_jap_fiener"; break;
  6. case 3: obrazek = "azalia_jap_eisprinzessin"; break;
  7. }
  8. document.getElementById('duzy_obrazek').src= "foto/min/" + obrazek + ".jpg";
  9. }
  10.  
  11. <div class="obrazek_maly">
  12. <img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" onclick='zmien_obrazek(1);' />
  13. <img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" onclick='zmien_obrazek(2);' />
  14. <img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" onclick='zmien_obrazek(3);' />
  15. </div>
  16. <img id='duzy_obrazek' class="obrazek_duzy" src="foto/min/azalia_jap_arabesk.jpg" />
Elber
Extra działa smile.gif Dziękuję CI bardzo za pomoc i fatygę smile.gif
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.