Forum PHP.pl

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:

[HTML] pobierz, plaintext 
<div class="obrazek_maly">
<img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" />
<img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" />
<img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" />
</div>
<img class="obrazek_duzy" src="foto/min/azalia_jap_arabesk.jpg" />
[HTML] pobierz, plaintext 

Ten post edytował Elber 27.12.2010, 21:36:58

poszukaj jquery gallery, setki wtyczek.

[HTML] pobierz, plaintext 
<script>
function zmien_obrazek(id) {
  var obrazek;
  switch(id) {
    case 1: obrazek = "azalia_jap_arabesk"; break;
    case 2: obrazek = "azalia_jap_fiener"; break;
    case 3: obrazek = "azalia_jap_eisprinzessin"; break;
  }
  document.getElementById('duzy_obrazek').innerHTML = "<img class="obrazek_duzy" src="foto/min/" + obrazek + ".jpg" />";
}
</script>
 
<div class="obrazek_maly">
<img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" onclick='zmien_obrazek(1);' />
<img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" onclick='zmien_obrazek(2);' />
<img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" onclick='zmien_obrazek(3);' />
</div>
<p id='duzy_obrazek'></p>
[HTML] pobierz, plaintext 

Użyty JavaScript. Pisane na szybko, mogą być błędy.

Wybierz drugi przykład z małym uproszczeniem - zamiast wstawić cały obrazek [który wywali błąd ] wstaw tylko src
http://forum.php.pl/index.php?showtopic=120187

@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.

[HTML] pobierz, plaintext 
<div class="obrazek_maly">
<img class="obrazek_maly" src="foto/min/azalia_jap_arabesk.jpg" />
<img style="padding-left:20px; padding-right:20px;"class="obrazek_maly" src="foto/min/azalia_jap_fiener.jpg" />
<img class="obrazek_maly" src="foto/min/azalia_jap_eisprinzessin.jpg" />
</div>
<img class="obrazek_duzy" src="foto/min/azalia_jap_arabesk.jpg" />
[HTML] pobierz, plaintext 

Extra działa Dziękuję CI bardzo za pomoc i fatygę