Autor Zpráva
Jerrry
Profil
Zdravím,

mám takovou minihru, kde mezi sebou přehazuji náhodně vygenerovaná čísla (v buttonech). Existuje nějaký jednoduchý způsob, jak místo buttonů dát obrázky? Čísel si nevšímat, ta jsou jen na zkoušku, jestli se to vůbec přehazuje.

Přikládám minihru: http://leteckaposta.cz/898982846

a kód:

<script>     


function zobraz(){

  for(i=0;i<4;i++){

    for(j=0;j<4;j++){

      m = [Math.ceil(Math.random()*4)]

      document.form.elements[4*i + j].value = m;

    }

  }

}
function test(r,s){

  if (volno == true){

    a=r-1;

    b=s-1;

    volno=false;

  }

  else {

    c=r-1;

    d=s-1;

    volno=true;
    //stejný řádek

    if (a == c){

      if (Math.abs(b-d) == 1){

        e=document.form.elements[4*a+b].value;// alert("e-ab");

        document.form.elements[4*a+b].value=document.form.elements[4*c+d].value;// alert("ab-cd"); 

        document.form.elements[4*c+d].value=e;// alert("cd-e");

        radek(a);

        sloupec(b);

        sloupec(d);

      }

      else {

        alert ("Tato dvě tlačítka spolu nesousedí.");

      }

    }
    //stejný sloupec, zatím nejde...

    else if (b == d){

      if (Math.abs(c-a) == 1){

        e=document.form.elements[4*a+b].value;

        document.form.elements[4*a+b].value=document.form.elements[4*c+d].value;

        document.form.elements[4*c+d].value=e;

        radek(a);

        radek(c);

        sloupec(d);

      }

      else {

        alert ("Tato dvě tlačítka spolu nesousedí.");

      }

    }


    else { alert ("Tato dvě tlačítka spolu nesousedí.");

    }

  }

}

</script>
<form name="form">

<table border="1" cellspacing="0" align="center">

<tr>

    <td><input type="button" name="b11" onClick="test(1,1);">

    <td><input type="button" name="b12" onClick="test(1,2);">

    <td><input type="button" name="b13" onClick="test(1,3);">

    <td><input type="button" name="b14" onClick="test(1,4);">

<tr>

    <td><input type="button" name="b21" onClick="test(2,1);">

    <td><input type="button" name="b22" onClick="test(2,2);">

    <td><input type="button" name="b23" onClick="test(2,3);">

    <td><input type="button" name="b24" onClick="test(2,4);">

<tr>

    <td><input type="button" name="b31" onClick="test(3,1);">

    <td><input type="button" name="b32" onClick="test(3,2);">

    <td><input type="button" name="b33" onClick="test(3,3);">

    <td><input type="button" name="b34" onClick="test(3,4);">

<tr>

    <td><input type="button" name="b41" onClick="test(4,1);">

    <td><input type="button" name="b42" onClick="test(4,2);">

    <td><input type="button" name="b43" onClick="test(4,3);">

    <td><input type="button" name="b44" onClick="test(4,4);">

</table>

</form>
<script>

zobraz();

volno=true;

</script>
_es
Profil
Jerrry:
Existuje nějaký jednoduchý způsob, jak místo buttonů dát obrázky?
Aj obrázky majú udalosť onclick a môžeš im meniť vlastnosť src (namiesto value pri <input type="button">).
Jerrry
Profil
Zkusím... kdyby něco, tak se ještě ozvu :)


No...

<input type="button" name="b11" onClick="test(1,1);">
<input type="button" name="b12" onClick="test(1,2);">

změním na

<img src="obrázek01.png" name="b11" onClick="test();">
<img src="obrázek02.png" name="b12" onClick="test();">

a stejně tak i ty další...



a když volám tu funkci "test", tak tam musí být, že měním ty zdroje obrázků. Tady si ale nejsem jistý, jak to napsat.

U těch čísel je mi to jasné (viz zdroják), ale u těch obrázků ne. Vysvětlí a napíše, prosím, někdo postup? Třeba jen pro dva obrázky při volání té mojí funkce test.


Alespoň u dvou obrázků bych rád, abych kliknul na jeden (uložil se jako zdrojový) a na druhý (cílový -> tam se zdrojový obrázek uloží).

Něco univerzálního - nejlépe upravený postup, co mám tady - ve funkci "test".
Jerrry
Profil
Fakt budu hodně rád, když mi s tím někdo pomůže (názorné řešení), už u toho trávím docela dost času a pořád nechce jít :/
_es
Profil
Jerrry:
Na identifikáciu konkrétneho obrázka môžeš použiť kolekciu document.images, konkrétnejšie document.images[poradovéČísloObrázka].
Trejpa
Profil
Jerrry:
Na identifikaci konkrétního obrázku můžeš použít kolekci document.images, konkrétněji document.images['jméno_obrázku'].

Například:
document.images['b11'].src='obrazek02.png';
Jerrry
Profil
Díky za odpovědi - tohle už jsem právě zkoušel...


V JS začínám - u těch obrázků zvlášť. Posílám část, která přehodí dva obrázky - ale je to příliš napevno (jde mi o univerzální řešení... u těch čísel jsem věděl, jak na to, ale tady ne)

Tohle by například bylo hodně špatné, kdyby byly ty obrázky čtyři (nebo více)... a já chtěl prohodit vždy libovolné dva.

Poradí někdo? Budu fakt moc rád, protože jsem k tomu nic moc nenašel. :/



<script>

function prehod(k,l){

document.images[k].src='Obrazek02.png'
document.images[l].src='Obrazek01.png'

}


</script>

<table border="1" cellspacing="0" align="center">

<tr>

<td><img src="Obrazek01.png" name="obrazek01" onClick="prehod(0,1)"></td>
<td><img src="Obrazek02.png" name="obrazek02" onClick="prehod(1,0)"></td>

</tr>



Například jak udělat funkci pro čtyři obrázky a prohození libovolných dvou (například prvního a čtvrtého obrázku, prvního a druhého atd.)
Keeehi
Profil
A takto?
function prehod(k,l){
    var pomocna = document.images[k].src;
    document.images[k].src=document.images[l].src;
    document.images[l].src=pomocna;
}
Jerrry
Profil
2Keeehi: paráda, díky :)

ale asi ještě poslední věc...

když tu funkci volám, tak v html mám

<tr>
 
<td><img src="Obrazek01.jpg" name="obrazek01" onClick="prehod(0,1)"></td>
<td><img src="Obrazek02.jpg" name="obrazek02" onClick="prehod(1,0)"></td>

</tr>

a mám tam napevno dáno, které přesně přehodit... když na ten obrázek kliknu.... to je asi špatně, ne? Když kliknutím chci zvolit jakýkoliv jeden obrázek a vyměnit s libovolným obrázkem... takhle v tom volání mám zvoleno, že chci přehodit image[0] a image [1] - ale mně jde o libovolné dva... na které kliknu...
Keeehi
Profil
Jerrry:
Pokud jsem to pochopil správně a tak by to mohlo být toto:
var predchozi = flase;
function prehod(tento){
    if ( predchozi ) {
        var pomocna = tento.src;
        tento.src = predchozi.src;
        predchozi.src = pomocna;
        predchozi = false;
    } else {
        predchozi = tento;
    }
}

<tr>
  <td><img src="Obrazek01.jpg" name="obrazek01" onClick="prehod(this)"></td>
  <td><img src="Obrazek02.jpg" name="obrazek02" onClick="prehod(this)"></td>
  <td><img src="Obrazek03.jpg" name="obrazek02" onClick="prehod(this)"></td>
  <td><img src="Obrazek04.jpg" name="obrazek02" onClick="prehod(this)"></td>
</tr>
Jerrry
Profil
Jo, pochopil, díky za pomoc :) Tohle jsem od začátku chtěl :)
Toto téma je uzamčeno. Odpověď nelze zaslat.