Autor Zpráva
termat
Profil *
Zdravím všechny webové kouzelníky...

jsem začátečník a narazila jsem na problém s fotogalerií.. http://www.censky.cz/foto.html
Potřebovala bych, aby po kliknutí na čtvereček se měnila velká fotka vedle menu a ta malá (náhled) - obě budou stejné a ještě aby ten čtvereček zčervenal...
Nevím si s tím rady, mám tam Java Script, ale dokážu jen to, že se mění jen velká fotka nebo zase jen ta malá, neumím sloučit všechno dohromady, aby se měnily všechny 3 věci (velká a malá fotka a aby ten čtvereček zčervenal)..
Díky moc za rady....
můj mail je: termat@post.cz
fajzen
Profil
Na to, aby boli štvorce červené, treba každému dať unikátne id, napr:
<img border="0" align="right" src="img/sedivy_ctverec.jpg" id="stvorec_1" />



Aby začervenanie po kliknutí na iný štvorec z pôvodného štvorca zmizlo, treba si do globálnej premennej uložiť id štvorca, ktorý bol aktívny naposledy, takže v JavaScriptovom kóde si mimo funkcie (najlepšie hneď na začiatok) treba definovať premennú, ktorá bude tento štvorec predstavovať:

var last_rectangle= null;


Čo sa samotného prevedenia týka, jedným z možných riešení by bolo upraviť funkciu preview tak, aby prijímala tri argumenty- cestu k veľkej fotke, cestu k malej fotke a id štvorca, ktorý má byť červený:

function preview( filename_big, filename_small,  rectangle) {
  document.images["prw"].src = filename_big;
  document.images["prw2"].src = filename_small;
  document.getElementById(rectangle).src= "img/cerveny_ctverec.jpg";

  // zmažeme začervenanie z predchádzajúceho štvorca (ak nejaký bol), a uložíme id nového aktívneho štvorca
  if(last_rectangle != null)
    document.getElementById(last_rectangle).src= "img/sedivy_ctverec.jpg";
  last_rectangle= rectangle;
}


Druhým, možno trochu pracnejším, ale krajším riešením, je premenovať všetky obrázky nejak nasledovne:
prvá veľká fotka: foto_big_1.jpg
k nej prvá malá fotka: foto_small_1.jpg
id štvorca, ktorý má byť červený: rectangle_1

druhá veľká fotka: foto_big_2.jpg
k nej druhá malá fotka: foto_small_2.jpg
id štvorca, ktorý má byť červený: rectangle_2

a tak ďalej, fotky a id sa líšia len koncovým číslom, pričom tie, ktoré so sebou súvisia, ho majú rovnaké

Funkcia preview by potom prijímala jediný parameter- toto číslo:
function preview( number ) {
  document.images["prw"].src = "img/foto_big_" + number + ".jpg";
  document.images["prw2"].src = "img/foto_small_" + number + ".jpg";
  document.getElementById("rectangle_" + number).src= "img/cerveny_ctverec.jpg";

  // aj tu zmažeme začervenanie z predchádzajúceho štvorca (ak nejaký bol), ale stačí uložiť iba to rozdielové číslo
  if(last_rectangle != null)
    document.getElementById("rectangle_" + last_rectangle).src= "img/sedivy_ctverec.jpg";
  last_rectangle= rectangle;
}

Vaše odpověď

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: