bouger une image...

Hello,

je cherche comment faire pour placer une image endroit différent dans un
tableau. Comment faire ça en javascript ?
merci d'avance...

pourquoi dans un tableau ? (tu veux bien dire un table s'pas ?)

peu n'importe

ton image est où au départ ?
elle est bien sur la page ?

c'est pour le jeu de l'oie ?
et pouvoir matérialiser la position du pion ?


Bref ...
imaginons une image :

<img id="oie" src="oie.jpg" alt="" />

imaginons un table

<table id="jeu">
<tbody>
<tr><td id="t11"></td><td id="t12"></td><td id="t13"></tr>
<tr><td id="t21"></td><td id="t22"></td><td id="t23"></tr>
<tr><td id="t31"></td><td id="t32"></td><td id="t33"></tr>
</tbody>
</table>

une petite FdS

<style type="text/css">
#oie { border: none; width: 64px; height: 64px; display: none; }
#jeu { border: 1px solid black; empty-cells: show }
#jeu tr { height: 70px; }
#jeu td { width: 70px; vertical-align: middle; text-align: center; }
#t11 { background: url(fond_11.jpeg) center center no-repeat #ffe; }
#t12 { background: url(fond_12.jpeg) center center no-repeat #ffd; }
#t13 { background: url(fond_13.jpeg) center center no-repeat #ffc; }
#t21 { background: url(fond_21.jpeg) center center no-repeat #fef; }
#t22 { background: url(fond_22.jpeg) center center no-repeat #fdf; }
#t23 { background: url(fond_23.jpeg) center center no-repeat #fcf; }
#t31 { background: url(fond_31.jpeg) center center no-repeat #eff; }
#t32 { background: url(fond_32.jpeg) center center no-repeat #dff; }
#t33 { background: url(fond_33.jpeg) center center no-repeat #cff; }
</style>

Ha ! voilà le javascript :

<script type="text/javascript">
var depart=1;
var position= 0;
var place='';
function bougeOie(lieu) {
// si l'oie a déjà été bougée, hop! on la détruit
if(depart!=1) place.parentNode.removeChild(place);
var la = document.getElementById(lieu);
// clonage image de l'oie originale
place = document.getElementById('oie').cloneNode(true);
place.style.display = 'inline';
// mise en place de l'oie
la.appendChild(place);
depart++;
}
function jouer() {
var count1 = Math.round(Math.random()*6); // lancer dé 1
var count2 = Math.round(Math.random()*6); // lancer dé 2
if(count1==0) count1 = 1;
if(count2==0) count2 = 1;
if(document.getElementById) {
// tableau des cellules du jeu
var T = document.getElementById('jeu').getElementsByTagName('TD');
// annonce des dés joués
with(document.forms[0])
{de_1.value=count1; de_2.value=count2;pos.value=position;}
// reperage nouvelle position (index dans tableu des cellules)
position = position>T.length? 2*T.length-position : position;
// bouger l'oie
bougeOie(T[i-1].id);
if(position==T.length) alert('Bravo ! Gagnxe9nen '+depart+' coups');
}
else
alert('votre navigateur n'est pas compatible avec ce jeu');
}
</script>

et le html complémentaire :

<form>
<input type=button onclick="jouer()" value="Jouer" />
Dé 1 : <input type=text name="de_1" size=3 />
Dé 2 : <input type=text name="de_2" size=3 />
pos = <input type="text" name="pos" size="3" />
<input type=button value="Nouveau Jeu" onclick="self.location=self.location" />
</form>


--
Stephane Moriaux et son [moins] vieux Mac

Vous êtes devin où quoi ?
Merci pour l'aide ;) vachement utile...

Hello,

je cherche comment faire pour placer une image endroit différent dans
un tableau. Comment faire ça en javascript ?
merci d'avance...

pourquoi dans un tableau ? (tu veux bien dire un table s'pas ?)

peu n'importe

ton image est où au départ ?
elle est bien sur la page ?

c'est pour le jeu de l'oie ?
et pouvoir matérialiser la position du pion ?


Bref ...
imaginons une image :

<img id="oie" src="oie.jpg" alt="" />

imaginons un table

<table id="jeu">
<tbody>
<tr><td id="t11"></td><td id="t12"></td><td id="t13"></tr>
<tr><td id="t21"></td><td id="t22"></td><td id="t23"></tr>
<tr><td id="t31"></td><td id="t32"></td><td id="t33"></tr>
</tbody>
</table>

une petite FdS

<style type="text/css">
#oie { border: none; width: 64px; height: 64px; display: none; }
#jeu { border: 1px solid black; empty-cells: show }
#jeu tr { height: 70px; }
#jeu td { width: 70px; vertical-align: middle; text-align: center; }
#t11 { background: url(fond_11.jpeg) center center no-repeat #ffe; }
#t12 { background: url(fond_12.jpeg) center center no-repeat #ffd; }
#t13 { background: url(fond_13.jpeg) center center no-repeat #ffc; }
#t21 { background: url(fond_21.jpeg) center center no-repeat #fef; }
#t22 { background: url(fond_22.jpeg) center center no-repeat #fdf; }
#t23 { background: url(fond_23.jpeg) center center no-repeat #fcf; }
#t31 { background: url(fond_31.jpeg) center center no-repeat #eff; }
#t32 { background: url(fond_32.jpeg) center center no-repeat #dff; }
#t33 { background: url(fond_33.jpeg) center center no-repeat #cff; }
</style>

Ha ! voilà le javascript :

<script type="text/javascript">
var depart=1;
var position= 0;
var place='';
function bougeOie(lieu) {
// si l'oie a déjà été bougée, hop! on la détruit
if(depart!=1) place.parentNode.removeChild(place);
var la = document.getElementById(lieu);
// clonage image de l'oie originale
place = document.getElementById('oie').cloneNode(true);
place.style.display = 'inline';
// mise en place de l'oie
la.appendChild(place);
depart++;
}
function jouer() {
var count1 = Math.round(Math.random()*6); // lancer dé 1
var count2 = Math.round(Math.random()*6); // lancer dé 2
if(count1==0) count1 = 1;
if(count2==0) count2 = 1;
if(document.getElementById) {
// tableau des cellules du jeu
var T = document.getElementById('jeu').getElementsByTagName('TD');
// annonce des dés joués
with(document.forms[0])
{de_1.value=count1; de_2.value=count2;pos.value=position;}
// reperage nouvelle position (index dans tableu des cellules)
position = position>T.length? 2*T.length-position : position;
// bouger l'oie
bougeOie(T[i-1].id);
if(position==T.length) alert('Bravo ! Gagnxe9nen '+depart+' coups');
}
else
alert('votre navigateur n'est pas compatible avec ce jeu');
}
</script>

et le html complémentaire :

<form>
<input type=button onclick="jouer()" value="Jouer" />
Dé 1 : <input type=text name="de_1" size=3 />
Dé 2 : <input type=text name="de_2" size=3 />
pos = <input type="text" name="pos" size="3" />
<input type=button value="Nouveau Jeu"
onclick="self.location=self.location" />
</form>

Vous êtes devin où quoi ?

Y a des fois ... ce serait bien !

Merci pour l'aide ;) vachement utile...

pas plus inutile que les feux tricolores
(cf autre réponse)

Hello,

je cherche comment faire pour placer une image endroit différent dans
un tableau. Comment faire ça en javascript ?
merci d'avance...

pourquoi dans un tableau ? (tu veux bien dire un table s'pas ?)

--
Stephane Moriaux et son [moins] vieux Mac