Comment integrer ce script dans une page? [Résolu]

Signaler
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
-
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
-
salut,
l'auteur lui meme ne sait pas , et moi j'y connais que dalle en javascript, html ,...
http://www.javascriptfr.com/code.aspx?ID=48133

merci

Bonjour chez vous !
A voir également:

22 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
le problème vient des %22 qu'il faut remplacer par des "
remplace les et colle le script à la fin de ton
fichier.

<html>

<head>
</head>

..TA PAGE...

<script type="text/javascript">
R = 0;
x1 = .1;
y1 = .05;

x2 = .25;
y2 = .24;
x3 = 1.6;
y3 = .24;
x4 = 300;
y4 =
200;
x5 = 300;
y5 = 200;
DI = document.getElementsByTagName( "img


"



);

DIL = DI.length;
function A() {
  for (i = 0; i - DIL; i++) {

    DIS = DI[i].style;
    DIS.position = 'absolute';
    DIS.left =
(Math.sin(R * x1 + i * x2 + x3) * x4 + x5) +



"



px



"



;
    DIS.top  = (Math.cos(R
* y1 + i * y2 + y3) * y4 + y5) +



"



px



"



;
  }
  R++
}

setInterval('A()', 50);
</script>


</html>



;O)
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
<





body





onload


"document.location.href'javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=\'absolute\'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval(\'A()\',50); void(0);'">














Bonjour chez vous !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
tiens juste pour le FUN
essaies cela...



<html>
<head>
<style type= "text/css">
.move
{
  color : red;
  border : 1px solid red;
  font-size : 18px;

  font-weigth : bold;
  height : 20px;
  width : 20px;

  text-align : center;
  background-color : #f0e0e0;
}

</style>
<script type="text/javascript">
var R = 0;

var x1 = .1;
var y1 = .05;
var x2 = .25;
var y2 = .24;
var
x3 = 1.6;
var y3 = .24;
var x4 = 300;
var y4 = 200;
var x5 =
300;
var y5 = 200;
//-- Tableau des images a
mover
var T_Img =[];
//-----------------------
function
Init_Animation(){
  //-- Recup de toutes les images
de la page
  T_Div = document.getElementsByTagName('DIV')

  for ( i = 0; i < T_Div.length; i++){
    //-- Ne garde que celles possedant la class move

    if( T_Div[i].className.indexOf("move") > -1){

      T_Img[T_Img.length] = T_Div[i];
    }
  }
  //-- lance la fonction du move

  setInterval('A()', 50);
}
//----------
function A(){
  var Nbr =
T_Img.length;
  for (i = 0; i < Nbr; i++) {
    with(
T_Img[i].style){
      position = 'absolute';
      left = (Math.sin(R *
x1 + i * x2 + x3) * x4 + x5) + "px";
      top = (Math.cos(R * y1 + i * y2 +
y3) * y4 + y5) + "px";
    }
  }
  R++;
}
</script>

</head>

<script
type="text/javascript">





  //-- Creation des images lettres






  var szLettre = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  var Html = "";
  for( i = 0; i < szLettre.length; i++){

    Html += "
" +szLettre.charAt(i) +"
"

  }
  document.write( Html);
</script>


</html>
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
39
salut
un truc comme ca devrait marcher :
[javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName('img'); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval('A()',50); void(0); clique ici]

bon courage
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
merci coucou747
mais est ce qu'il y a moyen sans devoir cliquer sur un lien ??

Bonjour chez vous !
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
39
tu peux tenter des choses comme ca :
<script type="text/javascript">
window.onload = function(){ R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200;
x5=300; y5=200; DI=document.getElementsByTagName('img'); DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
DIS.position='absolute';
DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22;
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval('A()',50); }
</script>
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
ne fonctionne pas du tout

Bonjour chez vous !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Copier coller hasardeux...
Attention pas d'espace avant le deuxième


"


dans cette ligne,


DI = document.getElementsByTagName( "img



"



);


et idem pour les



"



px



"



;







;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
décidément c'est l'éditeur qui m...e, si on met de la couleur !!!!!!!!!!!!

donc

DI =
document.getElementsByTagName( "img");
DIS.left = (Math.sin(R * x1 + i * x2
+ x3) * x4 + x5) + "px";
DIS.top = (Math.cos(R * y1 + i * y2 + y3) * y4 +
y5) + "px";

;O)
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
est il possible de traiter une liste d'images (donc pas toutes)avec ce script ????

exemple :   j'ai une page avec 10 liens chaque lien est représenté par une image, mais j'ai d'autres images sur la page qui sont juste la pour faire joli
si je voulais juste mettre en mouvement les images liens,, ou même d'autres images qui ne sont pas sur la page est ce possible ??

Bonjour chez vous !
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
39
faut remplacer ca :
DI=document.getElementsByTagName(%22img%22);
par ton tableau d'images.
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
ok mais comment je fais un tableau d'images???

( a.gif ,b.gif ) ????

Bonjour chez vous !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour,
Attention le code, tel que présenté, est intérressant pour
jouer avec une page affichée dans le navigateur.

Cela va devenir dur de
tout mettre dans le onload du BODY, il vaut
mieux passer par une fonction indépendante.

Comme le dit coucou747 il te faut récupérer dans un tableau les
images que tu veux mover, à cela plusieurs méthodes, comme d'habitude, en voici
une...

- On utilise une class de style par exemple move pour
différentier les images, celles qui bougent et les autres.
- A partir de la
collection d'image de la page, document.images, on ne récupére que celle qui ont la
class move et on les empile dans un tableau, on utilise indexOf( "move") pour récupérer l'info.
-
Ensuite on lance la fonction d'animation
le onload du BODY
...
 
Exemple de code
<html>
<head>

<style type= "text/css">
img { border : 1px solid blue;}
.move
{ border : 1px solid red;}
</style>
<script
type="text/javascript">
var R = 0;
var x1 = .1;
var y1 = .05;

var x2 = .25;
var y2 = .24;
var x3 = 1.6;
var y3 = .24;
var
x4 = 300;
var y4 = 200;
var x5 = 300;
var y5 = 200;
//-- Tableau des images a mover
var T_Img =[];
// Equivalent a var T_Img = new Array();

//-----------------------

function Init_Animation(){
  //--
Recup de toutes les images de la page
  for ( i = 0; i <
document.images.length; i++){
    //-- Ne garde que
celles possedant la class move
    if(
document.images[i].className.indexOf("move") > -1){

      T_Img[T_Img.length] = document.images[i];
    }
  }

  //-- lance la fonction du move

  setInterval('A()', 50);
}
//----------
function A(){
  var Nbr =
T_Img.length;
  for (i = 0; i < Nbr; i++) {
    with(
T_Img[i].style){
      position = 'absolute';
      left = (Math.sin(R *
x1 + i * x2 + x3) * x4 + x5) + "px";
      top = (Math.cos(R * y1 + i * y2 +
y3) * y4 + y5) + "px";
    }
  }
  R++;
}
</script>

</head>











</html>

Nota : Cela risque de
détruire ta mise en page de départ...Wait and SEA
;O)
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
non c'est ok c'était pour faire bouger toutes les lettres de l'alphabet dans une page qui sert à envoyer des mails mais j'ai éssayé et ça fait trop lourd

Bonjour chez vous !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
No blem, pour le FUN
tu pourrais ne faire valser que les lettres contenues dans le nom de
l'expéditeur...
;O))))
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
ben la c'est pas des images je sais pas si ça serait possible de faire ça avec des caractères
j'ai l'impression d'avoir sous estimé javascript

Bonjour chez vous !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
pour le principe
On lit les lettres composants le
nom...
On charge, ou précharge, les images des lettres correspondantes...

On envoi la valse...
That's All Folks
!

nota: cela risque d'être long avec des images, mais
on peut faire la même chose avec des lettres dans des SPANs ou des DIVs

;O)
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
WAOUW super cela permet de faire beaucoup mieux

merci pour ton aide

Bonjour chez vous !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
allez je te livre une version plus DOM
<html>
<head>

<style type= "text/css">
.move {
  color : red;
  border :
1px solid red;
  font-family : verdana;
  font-size : 18px;
  font-weigth : bold;
  height :
20px;
  width : 20px;
  text-align : center;
  background-color :
#f0e0e0;
}
</style>
<script type="text/javascript">

var R = 0;
var x1 = .1;
var y1 = .05;
var x2 = .25;
var y2 =
.24;
var x3 = 1.6;
var y3 = .24;
var x4 = 300;
var y4 = 200;

var x5 = 300;
var y5 = 200;
//-- Tableau des
images a mover
var T_Img =[];
//-----------------------
function
Init_Animation(){
  //-- La chaine de reference

  var szLettre = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  //-- Creation des images Lettres
  for( i = 0; i
< szLettre.length; i++){
    var O_Div = document.createElement('DIV');

    O_Div.innerHTML = szLettre.charAt(i);
    O_Div.className = 'move';

    document.body.appendChild( O_Div);
    //--
stockage dans tableau
    T_Img[T_Img.length] = O_Div;
  }

  //-- lance la fonction du move

  setInterval('A()', 50);
}
//----------
function A(){
  var Nbr =
T_Img.length;
  for (i = 0; i < Nbr; i++) {
    with(
T_Img[i].style){
      position = 'absolute';
      left = (Math.sin(R *
x1 + i * x2 + x3) * x4 + x5) + "px";
      top = (Math.cos(R * y1 + i * y2 +
y3) * y4 + y5) + "px";
    }
  }
  R++;
}
</script>

</head>


</html>

c'est un peu plus classe...

Bon jeu
;O)
Messages postés
3275
Date d'inscription
jeudi 3 avril 2008
Statut
Membre
Dernière intervention
14 septembre 2014
4
désolé mais je n'y vois aucune différence à l'éxécution

Bonjour chez vous !