Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1233 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  faire bouger une image en javascript

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

faire bouger une image en javascript

n°1392423
takamo
Posté le 21-06-2006 à 18:49:55  profilanswer
 

Bonjour,
 
je viens ici car j'ai quelques soucies avec mon javascript :fou:  

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 :
 

Citation :

<!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  :hello:
 
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
mood
Publicité
Posté le 21-06-2006 à 18:49:55  profilanswer
 

n°1392488
satirik
Posté le 21-06-2006 à 20:49:18  profilanswer
 

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

n°1392824
takamo
Posté le 22-06-2006 à 14:28:40  profilanswer
 

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

n°1393204
satirik
Posté le 22-06-2006 à 22:42:46  profilanswer
 

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

n°1394784
takamo
Posté le 26-06-2006 à 10:03:50  profilanswer
 

voila ma derniere version (dans laquel j'ai rajouté une boucle spip) qui marche presque comme je veux :
 

Citation :


 
 
<SCRIPT LANGUAGE="JavaScript">
 
tableau_logo = new Array;
redirection = new Array;
temporisation = new Array;
 
<BOUCLE_PARTENAIRE(ARTICLES)>
 //lien entre les images et le site concerné
 i#COMPTEUR_BOUCLE = new Image;
 i#COMPTEUR_BOUCLE.src = 'IMG/[(#LOGO_ARTICLE|fichier)]';
   
 redirection[#COMPTEUR_BOUCLE] = "#SOUSTITRE";
 tableau_logo[#COMPTEUR_BOUCLE] = i#COMPTEUR_BOUCLE.src;
 temporisation[#COMPTEUR_BOUCLE] = "#SURTITRE";
 
 
</BOUCLE_PARTENAIRE>
a=1;
function animation()
 {
   
  document.write('<A HREF="#" onClick="image_lien_site();return(false)"><IMG SRC="logo/1.jpg" BORDER=0 width=100% height=40% target="_blank" 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=100% height=40% target="_blank" NAME=defil1></A>');
    attente()
 
 }
 
function image_lien_site()
 {
 document.location.href = redirection[a-2];
 }
.
.
.
.
.
.  
</SCRIPT>
 
 
<SCRIPT LANGUAGE="JavaScript">
 
  animation();
   
</SCRIPT>


 
j'ai plus que 3 pitits soucies et ca sera bon  :bounce:  
 
- 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  :fou:
 
si quelqu'un voit pourquoi ... ca m'aiderait bien  
 
 :jap:


Message édité par takamo le 26-06-2006 à 11:52:49
n°1394958
takamo
Posté le 26-06-2006 à 14:21:39  profilanswer
 

personne a une idée pour le target ?


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  faire bouger une image en javascript

 

Sujets relatifs
CSS lien imageré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 CSSimage de fons ne s'affiche pas
Survol d'une image...Chemin relatif sous ActiveX/Javascript
Plus de sujets relatifs à : faire bouger une image en javascript


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR