La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  images tournantes		 « Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: images tournantes  (Lu 1654 fois)
images tournantes
« sur: le 20-09-2008 a 12:08:32 »
jojo66
Membre récent
*

Hors-Ligne

Messages: 9



Je suis un lama!

Voir le Profil    E-Mail
Répondre avec citation

Bonjour
je suis nouveau dans ce forum et j'ai une question technique à vous poser.
dans les lignes suivantes j'arrive pas à trouver l'erreur : les photos (12) tournent à coté de l'espace qui lui est réservé ! Qu'ai je fait la est toute la question
<body>
<script type="text/javascript">
//cette entete doit rester intacte

//Taille des images, elle doivent avoir toutes les mêmes dimensions
   var Car_Image_Width=100;
   var Car_Image_Height=100;
   var Car_Border=true;      // true ou false
   var Car_Border_Color="white";
   var Car_Speed=4;
   var Car_Direction=true;      // true or false
   var Car_NoOfSides=24;      // nb de faces 4,6,8 ou 12

/* Liste des images et des liens associés
le nb d'images à déclarer doit être la moitié du nombre de faces
ici 8 faces donc 4 images
*/
   Car_Image_Sources=new Array(
      "img1.gif","",
      "img2.gif","",
      "img3.gif","",
      "img4.gif","",
      "img5.gif","",
      "img6.gif","",
      "img7.gif","",
      "img8.gif","",
      "img9.gif","",
      "img10.gif","",
      "img11.gif","", //exemple sans lien
      "img12.gif","" //pas de virgule a la derniere
      );

//ne rien modifier ci-dessous
   CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
   C_Coef=new Array(
      3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,   0,
      Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
   var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
   C_Pre_Img=new Array(Car_Image_Sources.length);
   var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
   C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

   function Carousel(){
      if(document.getElementById){
         for(i=0;i<Car_Image_Sources.length;i+=2){
            C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
         C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
         Car_Div=document.getElementById("Carousel");
         for(i=0;i<C_HalfNo;i++){
            CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);   
            CW_I[i].style.position="absolute";
            CW_I[i].style.top=0+"px";
            CW_I[i].style.height=Car_Image_Height+"px";
            if(Car_Border){
               CW_I[i].style.borderStyle="solid";
               CW_I[i].style.borderWidth=1+"px";
               CW_I[i].style.borderColor=Car_Border_Color}
            CW_I[i].src=Car_Image_Sources[2*i];
            CW_I[i].lnk=Car_Image_Sources[2*i+1];
            CW_I[i].onclick=C_LdLnk;
            }
         CarImages()}}

   function CarImages(){
      if(!C_Stppd){
         C_TotalW=0;
         for(i=0;i<C_HalfNo;i++){
            C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
            C_TotalW+=C_ClcW[i]}
         C_LeftOffset=(C_MaxW-C_TotalW)/2;
         for(i=0;i<C_HalfNo;i++){
            CW_I[i].style.left=C_LeftOffset+"px";
            CW_I[i].style.width=C_ClcW[i]+"px";
            C_LeftOffset+=C_ClcW[i]}
         C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
         if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
            if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
            if(Car_Direction){
               CW_I[C_HalfNo]=CW_I

  • ;
                   for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
                   CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
                   CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
                else{   for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
                   CW_I
  • =CW_I[C_HalfNo];
                   CW_I
  • .src=Car_Image_Sources[C_CrImg];
                   CW_I
  • .lnk=Car_Image_Sources[C_CrImg+1]}
                C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
          setTimeout("CarImages()",50)}

       function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
    </script>
       <div id="Carousel" style="position:relative">
          <img src="placeholder.gif" width="780" height="202">
          </div>
    <!-- Les dimensions de placeholder.gif doivent être les suivantes
    pour la largeur :
       4 faces : (1.42 x largeur image)+3
       6 faces : (2 x largeur image)+4
       8 faces : (2.62 x largeur image)+5
       12 faces : (3.87 x largeur image)+7
          ici 8 faces : width=2.62x100 + 5 = 267
    pour la hauteur :
       largeur image + 2
          ici : height=100+2=102 -->
    <font face="Verdana" size="2" color="#000080">Carroussel 12 faces </font>
    </body>
    <body>
    <body onload="Carousel()">
    </body>

    merci de m'indiquer mon erreur.
    cordialement
    jojo66

    		•
    Rapporter au modérateur  

    Re:images tournantes
    « Répondre #1 sur: le 20-09-2008 a 18:40:47 »
    Krisss
    Invité

    E-Mail
    Répondre avec citation

    Tiens voici la correction, regarde body,  le body onload, et le reste.
    ----------script----->

    <html>
    <head>
    <script type="text/javascript">

    // 7 variables de controle
       var Car_Image_Width=140;
       var Car_Image_Height=225;
       var Car_Border=true;      // true ou false
       var Car_Border_Color="white";
       var Car_Speed=4;
       var Car_Direction=true;      // true ou false
       var Car_NoOfSides=8;      // doit être à 4, 6, 8 or 12

    /* array pour spécifier les images et les liens optionnels.
       Pour un carrousel à 4 faces au minimum 2 images
       Pour un carrousel à 6 faces au minimum  3
       Pour un carrousel à 8 faces au minimum 4
       Pour un carrousel à 12 faces au minimum  6
    Si les liens ne sont pas obligatoires, ne les mettez pas ""
    */
       Car_Image_Sources=new Array(
          "img1.gif","http://www.webfreelance.ch",
          "img2.gif","http://www.webmaster-chris.ch",
          "img3.gif","", //Pas de liens sur celui-ci
          "img4.gif","http://www.google.com",
          "img5.gif","",
          "img6.gif","",
          "img7.gif","",
          "img8.gif","",
          "img9.gif","",
          "img10.gif","",
          "img11.gif","",
          "img12.gif","" // NOTE pas de virgules sur la dernière ligne
          );

    /***************** NE RIEN MODIFIER CI-DESSOUS **********************************/
       CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
       C_Coef=new Array(
          3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,   0,
          Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
       var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
       C_Pre_Img=new Array(Car_Image_Sources.length);
       var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
       C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

       function Carousel(){
          if(document.getElementById){
             for(i=0;i<Car_Image_Sources.length;i+=2){
                C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
             C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
             Car_Div=document.getElementById("Carousel");
             for(i=0;i<C_HalfNo;i++){
                CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);   
                CW_I[i].style.position="absolute";
                CW_I[i].style.top=0+"px";
                CW_I[i].style.height=Car_Image_Height+"px";
                if(Car_Border){
                   CW_I[i].style.borderStyle="solid";
                   CW_I[i].style.borderWidth=1+"px";
                   CW_I[i].style.borderColor=Car_Border_Color}
                CW_I[i].src=Car_Image_Sources[2*i];
                CW_I[i].lnk=Car_Image_Sources[2*i+1];
                CW_I[i].onclick=C_LdLnk;
                CW_I[i].onmouseover=C_Stp;
                CW_I[i].onmouseout=C_Rstrt}
             CarImages()}}

       function CarImages(){
          if(!C_Stppd){
             C_TotalW=0;
             for(i=0;i<C_HalfNo;i++){
                C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
                C_TotalW+=C_ClcW[i]}
             C_LeftOffset=(C_MaxW-C_TotalW)/2;
             for(i=0;i<C_HalfNo;i++){
                CW_I[i].style.left=C_LeftOffset+"px";
                CW_I[i].style.width=C_ClcW[i]+"px";
                C_LeftOffset+=C_ClcW[i]}
             C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
             if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
                if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
                if(Car_Direction){
                   CW_I[C_HalfNo]=CW_I

  • ;
                   for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
                   CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
                   CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
                else{   for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
                   CW_I
  • =CW_I[C_HalfNo];
                   CW_I
  • .src=Car_Image_Sources[C_CrImg];
                   CW_I
  • .lnk=Car_Image_Sources[C_CrImg+1]}
                C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
          setTimeout("CarImages()",50)}

       function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
       function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
       function C_Rstrt(){C_Stppd=false}
    </script>
    </head>
    <body onload="Carousel()">
       <div>
          <div id="Carousel" style="position:relative">
             <img src="placeholder.gif" width="371" height="225">
          </div>
          <div>
             <p><font face="Arial" size="-2">Le carrousel, scripts DHTML gratuit mis à dispo par <a href="http://www.webfreelance.ch">Webfreelance.ch</a></font></p>
          </div>
       </div>
    </body>
    </html>

    ----------fin de script----->

    Dis nous si c'est ok 

    • Rapporter au modérateur  
    Re:images tournantes
    « Répondre #2 sur: le 21-09-2008 a 10:48:44 »
    jojo66
    Membre récent
    *

    Hors-Ligne

    Messages: 9



    Je suis un lama!

    Voir le Profil    E-Mail
    Répondre avec citation

    merci beaucoup pour ton aide.
    j'ai fait l'essai pas de soucis sauf que je ne vois pas les photos défiler. j'ai pourtant modifier le fichier précédent mais bon!

    une idée?

    merci d'avance
    JR
    Rapporter au modérateur  
    Re:images tournantes
    « Répondre #3 sur: le 21-09-2008 a 14:17:24 »
    Krisss
    Invité

    E-Mail
    Répondre avec citation

    Tu peux visualiser le script à cette adresse: http://www.webfreelance.ch/carrousel/ 

    Pourrais-tu mettre le tiens sur une page online pour voir le résultat en direct ?

    Rapporter au modérateur  
    Re:images tournantes
    « Répondre #4 sur: le 21-09-2008 a 14:24:48 »
    jojo66
    Membre récent
    *

    Hors-Ligne

    Messages: 9



    Je suis un lama!

    Voir le Profil    E-Mail
    Répondre avec citation

    ok je m'en occupe dans la soirée.

    merci
    Rapporter au modérateur  
    Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
    Pages: [1] Monter
    « Précédent Suivant »
    Sauter à: 

    Votre statut : Invité
    Vous devez être membre pour participer.
     
     
    Let’s Encrypt : le certificat SSL gratuit
    Tester votre site internet sur différents navigateurs
    [WordPress] Des problèmes avec l’administration ?
    Rappel : Mettez à jour vos CMS et vos sites E-commerce
    Le .fr fête ses 25 années d’existence !
    Mesurer votre audience en temps réel avec BubbleStat
    Porter réclamation contre Google Panda ?
    Zlio n’est plus …
     
     
     
     
    		 
    Logo du forum du webmaster

    Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

    creation site internet strasbourg