faire bouger une image en javascript
faire bouger une image en javascript - HTML/CSS - Programmation
Marsh Posté le 21-06-2006 à 20:49:18
jveux bien repondre a des questions mais la j'ai pas envie de reflechir a chercher la question ...
c'est pas bien compliqué le javascript, quand tu maitrise l'html et le css, tu recupere un element : document.getElementById(id_de_ton_element) .... et tu le mets dans une variable ou bien tu applique directement les méthodes dessus : var monElement = document.getElementById(...) ou document.getElementById(...).ma méthode
ensuite tu modifie les propriétés CSS comme la position absolue et les coordonnées: monElement.style.position = 'absolute' ; monElement.style.left = '50px'; monElement.style.top = '20px' etc etc apres si tu connais rien a l'html et au css ben commence pas par le javascript 
et sinon si t'as besoins d'autres fonctions google répondra a toute tes questions tres facilement
Marsh Posté le 22-06-2006 à 14:28:40
merci de ta reponse Satirik
effectivement j'ai oublié mes questions lol
de toute facon je suis revenue sur un module qui m'est plus utile pour l'instant.
si tu veux bien y jetter un oeuil j'ai edité mon premier post
merci par avance
Marsh Posté le 22-06-2006 à 22:42:46
tu t'y prends mal, ne crée pas les images avec javascript, crée les en html simple et apres déplace les avec le javascript, le javascript c pour le dynamique l'affichage doit rester en html, donc tu fais tes images comme d'hab tes liens dessus et apres tu les fait bouger avec javascript
Marsh Posté le 26-06-2006 à 10:03:50
voila ma derniere version (dans laquel j'ai rajouté une boucle spip) qui marche presque comme je veux :
| Citation : |
j'ai plus que 3 pitits soucies et ca sera bon 
- mes target="_blank" ne fonctionnent pas meme en essayant : onClick="window.open('image_lien_site()','_blank') (pour que ca passe en W3C) - ma 1ere image ne s'affiche pas ni son lien vers le site par contre toutes les autres oui ... bisare - lorsque je mets mon switch pour gerer différent temps d'attente bah ca plante tout 
si quelqu'un voit pourquoi ... ca m'aiderait bien
Message édité par takamo le 26-06-2006 à 11:52:49
Sujets relatifs:
- CSS lien image
- répertoire de l'image smalltalk (visualworks)
- menu javascript bloqué
- [Javascript] Div qui se recharge toutes les x secondes
- Créer un formulaire afin d'uploader une image
- [JavaScript] Existance d'un selected=true ?
- Image modifiable via CSS
- image de fons ne s'affiche pas
- Survol d'une image...
- Chemin relatif sous ActiveX/Javascript
Marsh Posté le 21-06-2006 à 18:49:55
Bonjour,
je viens ici car j'ai quelques soucies avec mon javascript
idée de depart :
Voila j'essai de faire défiller 4 ou 5 images qui iraient de bas en haut puis disparaissent une fois arrivé en haut pour réapparaitre en bas et en faire une boucle et ceux dans un cadre mais j'aimerais également que lorsque l'on passe la sourie au dessus ca arrete le défilement et chaque image/logo etant en fait un lien vers un site ou une autre partie de mon site (genre lien href)
ayant mis ca pour l'instant de coté je me suis lancé sur celle la :
la je cherche a afficher des images/logos ( 2 par 2) qui sont en fait des liens de redirections, elles doivent :
- défiller 2 par 2 et boucler
- lorsque l'on clique dessus ca doit ouvrir le lien dans une nouvelles page
autres idées :
- pouvoir les faires apparaitre avec des timing diferents par exemple l'une 5 sec l'autre 10 secs
voila ce que j'ai fait pour l'instant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<SCRIPT LANGUAGE="JavaScript">
tableau_logo = new Array;
redirection = new Array;
//lien entre les images et le site concerné
i0 = new Image;
i0.src = 'logo/1.jpg';
redirection[0] = "http://www.ogame.fr";
tableau_logo[0] = i0.src;
i1 = new Image;
i1.src = 'logo/2.jpg';
redirection[1] = "http://www.investir.fr";
tableau_logo[1] = i1.src;
.
.
.
.
.
a = 0;
//fonction pour faire changer l'image + lien
function animation()
{
//ici ni le target ni le windows.open() ne fonctionnent
document.write('<A HREF="#" onClick="image_lien_site();return(false)"><IMG SRC="logo/1.jpg" BORDER=0 width=15% height=15% image_lien_site() NAME=defil></A>','<br><br>');
document.write('<A HREF="#" onClick="image_lien_site1();return(false)"><IMG SRC="logo/1.jpg" BORDER=0 width=15% height=15% target="_blank" NAME=defil1></A>');
attente()
}
.
.
.
.
.
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
animation();
</SCRIPT>
</body>
</html>
pour tester copier coller tel que et créer vous des images nommé : 1/2/3/4/5/6.jpg que vous mettrez dans un dossier "logo".
les problemes rencontrés :
- marche sous firefox mais pas IE
- fonctionne si j'ai 2/4/6/.. logo par contre bug si j'en ai un nombre impair
- j'ai ajouter des target="_blank" pour que les liens s'ouvrent dans une autre page mais sans succé j'ai également essayé d'utiliser le windows.open() mais la page qui s'ouvre est blanche
donc si vous avez des solutions ou trouvez des erreurs ca m'aiderait beaucoup
merci par avance de votre aide
ps : je retenterais ma 1er idée quand j'aurais réglé ces quelques bugs
Message édité par takamo le 26-06-2006 à 11:54:02