Autor Zpráva
lachim15
Profil
Zdravím,
potřeboval bych znova poradit v js.

Pro pochopení, mám předem několik předdefinovaných obrázků (16) + text. Po kliknutí na obrázek, který je zabalený v hypertextovém odkazu se změní předdefinované obrázky podle toho, co je napsané v odkazu.
Těchto klikacích obrázků mám na stránce spoustu, kvůli tomu je zdrojový kód příliš dlouhý.

Napadla mě taková věc, že bych si JS příkazy zapsané v odkazu zabalil do JS souboru a poté třeba jen do odkazu hodil ID funkce, kterou bych chtěl vyvolat, nebo něco podobného, snad mě pochopíte ... :)
Jenomže JS moc nerozumím, a proto bych chtěl poprosit někoho o napsání nějakého jednoduchého scriptu.

1 Obrázek
<a href='#' 
onclick="document.images['t1'].src='/obrazky/.../Obr. 1.png',document.images['t2'].src='/obrazky/.../Obr. 2.png',document.images['t3'].src='/obrazky/.../Obr. 3.png',document.images['t4'].src='/obrazky/.../Obr. 4.png',document.images['t5'].src='/obrazky/.../Obr. 5.png',document.images['t6'].src='/obrazky/.../Obr. 6.png',document.images['t7'].src='/obrazky/.../Obr. 7.png',document.images['t8'].src='/obrazky/.../Obr. 8.png',document.images['t9'].src='/obrazky/.../Obr. 9.png',document.images['t10'].src='/obrazky/.../Obr. 10.png',document.images['t11'].src='/obrazky/.../Obr. 11.png',document.images['t12'].src='/obrazky/.../Obr. 12.png',document.images['t13'].src='/obrazky/.../Obr. 13.png',document.images['t14'].src='/obrazky/.../Obr. 14.png',document.images['t15'].src='/obrazky/.../Obr. 15.png',document.images['t16'].src='/obrazky/.../Obr. 16.png'" class='nic'><img src='obrazky/.../nějaký_první_obr.png' class='...' data-text='Text' title='Text'></a>

Další obrázek
<a href='#' 
onclick="document.images['t1'].src='/obrazky/.../Obr. 1.png',document.images['t2'].src='/obrazky/.../Obr. 2.png',document.images['t3'].src='/obrazky/.../Obr. 3.png',document.images['t4'].src='/obrazky/.../Obr. 4.png',document.images['t5'].src='/obrazky/.../Obr. 5.png',document.images['t6'].src='/obrazky/.../Obr. 6.png',document.images['t7'].src='/obrazky/.../Obr. 7.png',document.images['t8'].src='/obrazky/.../Obr. 8.png',document.images['t9'].src='/obrazky/.../Obr. 9.png',document.images['t10'].src='/obrazky/.../Obr. 10.png',document.images['t11'].src='/obrazky/.../Obr. 11.png',document.images['t12'].src='/obrazky/.../Obr. 12.png',document.images['t13'].src='/obrazky/.../Obr. 13.png',document.images['t14'].src='/obrazky/.../Obr. 14.png',document.images['t15'].src='/obrazky/.../Obr. 15.png',document.images['t16'].src='/obrazky/.../Obr. 16.png'" class='nic'><img src='obrazky/.../další_obr.png' class='...' data-text='Text' title='Text'></a>

....

JS na změnu textu:
<script>
var targets = document.getElementsByClassName('change');

for (var i in targets) {
    targets[i].addEventListener('click', function (e) {
        var target = e.target;
        
        document.getElementById('vyber').innerHTML = target.getAttribute('data-text');
    });
}
</script>
mimochodec
Profil
Nepotřebuješ http://www.w3schools.com/js/js_loop_for.asp ?
lachim15
Profil
Jo to vypadá použitelně, ale nevím jak to zakomponovat k sobě. Mám totiž vytvořenou tabulku, kde se mi mění obrázky podle "name" původního obrázku.

Pro přiblížení:
http://nemesisup.cz/files/541/test.png

Každý čtvereček (pod nadpisem Bedna a Další materiály) je 1 pozice pro obrázek a mění se podle výběru.
mimochodec
Profil
Tomu úplně nerozumím, ale začal bych tím, že ty skripty z toho html vytáhneš do externího JS, tam si napíšeš nějakou funkci, které budeš klikancem předávat nějaký parametr a ten tam zpracuješ. Ty tvoje kódy pro dva obrázky se někde liší, ale netuším kde a nechce se mně to hledat. Popiš, co od toho chceš a vyviň nějakou inciativu, která pro začátek dosáhne toho, že do toho externího JS dostaneš ten parametr a třeba si ho vypíšeš ( alert (i);).

Řekněme, že výsledné html by mohlo vypadat takto:
<img id="img1" src="img1.png" onclick="zmen_obrazky(1)">
<img id="img2" src="img2.png" onclick="zmen_obrazky(2)">
..

(poupraveno)
Všechno ostatní bude v tom externím JS.
lachim15
Profil
jj takhle jsem si to představoval, že to bude vypadat.

Jen doplním k tomu mému příkladu, to je jen na ukázku jak to vypadá, z čeho se to skládá a že je tam víc toho za sebou. Samozřejmě se to na stránce liší v obrázcích.

EDIT: Nahraji živou ukázku pro pochopení.
EDIT2: http://jaknaminecraft.cz/stranky/craft.php
lachim15
Profil
Splácal jsem do kupy:
<img class='craft_img change' src="/obrazky/crafting/crafting_t.png" onclick="c1()" data-text='Craftovací bedna'  title='Craftovací bedna'>

function c1() {
document.images['t1'].src='/obrazky/crafting/planks1.png'
document.images['t2'].src='/obrazky/crafting/planks1.png',
document.images['t3'].src='/obrazky/crafting/c1.png',
document.images['t4'].src='/obrazky/crafting/planks1.png',
document.images['t5'].src='/obrazky/crafting/planks1.png',
document.images['t6'].src='/obrazky/crafting/c1.png',
document.images['t7'].src='/obrazky/crafting/c1.png',
document.images['t8'].src='/obrazky/crafting/c1.png',
document.images['t9'].src='/obrazky/crafting/c1.png',
document.images['t10'].src='/obrazky/crafting/crafting_t.png',
document.images['t11'].src='/obrazky/crafting/planks2.png',
document.images['t12'].src='/obrazky/crafting/planks3.png',
document.images['t13'].src='/obrazky/crafting/planks4.png',
document.images['t14'].src='/obrazky/crafting/planks5.png',
document.images['t15'].src='/obrazky/crafting/planks6.png',
document.images['t16'].src='/obrazky/crafting/c1.png'
};

1, Nešel by ten kód zjednodušit?
2, Těchto podobných funkcí budu mít za sebou víc, nešly by zkombinovat? Mění se pouze jména obrázků.
mimochodec
Profil
Ale jo. Co třeba takhle?

var arr1 = "planks1,planks1,c1,planks1,planks1,c1,c1,c1,c1,crafting_t,planks2,planks3,planks4,planks5,planks6,c1";
var res = arr1.split(",");

for (i = 0; i < res.length; i++) { 
   document.images["t"+(i+1)].src="/obrazky/crafting/"+res[i]+".png";
}

Omlouvám se za ty překlepy, snad už jsem spravil věechno. Veletlín je dobrý sluha, ale špatný pán.
lachim15
Profil
Super, funguje skvěle. Díky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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