OVH Cloud OVH Cloud

bouger une image...

3 réponses
Avatar
Yves Lange
Hello,

je voudrais faire bouger une image à trois postions différente avec des
pauses de 3secondes d'intervalles entre chaque changement. Comment faire
pour déplacer une image dans un tableau ? Comment faire pour faire
patienter le naviguateur...

---------2-----------
1--------------------
---------------3-----
_____________________
Image qui bouge sur trois position différente...


Merci

3 réponses

Avatar
Olivier Miakinen

je voudrais faire bouger une image à trois postions différente avec des
pauses de 3secondes d'intervalles entre chaque changement. Comment faire
pour déplacer une image dans un tableau ? Comment faire pour faire
patienter le naviguateur...

---------2-----------
1--------------------
---------------3-----
_____________________
Image qui bouge sur trois position différente...


Il y a plein de façons différentes de procéder. Je réponds aux questions
dans l'ordre inverse de celui dans lequel tu les as posées.

1) Pour faire patienter le navigateur, tu peux utiliser
window.setTimeout() ou window.setInterval().
Voir par exemple :
http://www.devguru.com/Technologies/ecmascript/quickref/window.html
http://www.devguru.com/Technologies/ecmascript/quickref/win_settimeout.html
http://www.devguru.com/Technologies/ecmascript/quickref/win_setinterval.html

2) Pour déplacer l'image, soit tu utilises trois images différentes,
soit tu utilises les propriétés de positionnement CSS (position:
absolute ou position: relative).

3) Enfin une dernière possibilité, sans JavaScript, serait d'utiliser
une seule image, mais un GIF animé.

--
Olivier Miakinen
Troll du plus sage chez les conviviaux : le nouveau venu, avec
son clan, s'infiltre dans les groupes de nouvelles. (3 c.)

Avatar
ASM

je voudrais faire bouger une image à trois postions différente avec des
pauses de 3secondes d'intervalles entre chaque changement. Comment faire
pour déplacer une image dans un tableau ? Comment faire pour faire
patienter le naviguateur...

---------2-----------
1--------------------
---------------3-----
_____________________
Image qui bouge sur trois position différente...



ha ! ben ! Yves
et pourquoi ne pas l'avoir dit tout de suite ?


2) Pour déplacer l'image, soit tu utilises trois images différentes,


ce qui est le plus facile
et en plus, mon NC4.5 saura le faire

les 2 images (vide.gif et pict.jpg) doivent être affichées
à la même dimension c a d celle de pict.jpg
vige.gif peut n'être que de 4 pixels

les 3 images de départ sur la page portent un nom

<table>
<tr>
<td><img name="i1" src="vide.gif" width="100" height="60" alt=""></td>
<td><img name="i2" src="vide.gif" width="100" height="60" alt=""></td>
<td><img name="i3" src="vide.gif" width="100" height="60" alt=""></td>
</tr>
</table>
<script type="text/javascript">
// déclaration des 2 images pour les avoir en cache
if(document.image) {
V = new Image(); V.src = 'vide.gif';
P = new Image(); P.src = 'pict.jpg';
}
var k=0;
function boug() {
k++;
if(k==4) k=1;
// les 3 images à vide (en se servant du cache)
for(var j=1;j<4;j++)
document.images['i'+j].src = V.src;
// on affiche celle visible à la nouvelle place
document.images['i'+k].src = P.src;
// et on recommence dans 7/10 de seconde
setTimeout('boug()',700);
}
onload=boug;
</script>


--
Stephane Moriaux et son [moins] vieux Mac


Avatar
ASM

</table>
<script type="text/javascript">
// déclaration des 2 images pour les avoir en cache
if(document.image) {


correctif :

if(document.images) {

V = new Image(); V.src = 'vide.gif';


etc


--
Stephane Moriaux et son [moins] vieux Mac