Format des photos

Résolu
Bonjour,

j'ai utilisé javascript pour faire tourner des photos sur ma bannière . Mon code css est
img
{
    width:900px;
    height:250px;
 display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 175px;
  border-radius: 15px;
  box-shadow: 0px 4px 4px #1c1a19;
}

// et mon code javascript est le suivant

<script>

   window.onload= defilImg
   current_img = 0;
   arrImg = ['pontlabbe/pontlabbe1.jpg', 'pontlabbe/pontlabbe2.jpg', 'pontlabbe/pontlabbe3.jpg', 'pontlabbe/pontlabbe4.jpg', 'pontlabbe/pontlabbe5.jpg', 'pontlabbe/pontlabbe11.jpg', 'pontlabbe/pontlabbe8.jpg', 'pontlabbe/pontlabbe10.jpg'];

 
 
  function defilImg(){
   if(current_img == arrImg.length)
   current_img = 0;
   document.getElementById('toto').src = arrImg[current_img++];
   window.setTimeout('defilImg()',3000);
}
 </script>


du coup je ne peux plus mettre d'autres photos sur ma page car elle prennent le même format (même avec un Id ). Merci pour votre réponse.
A+
Claudio

EDIT : Ajout des balises de code

3 réponses

  1. Modérateur
    Le souci vient de ton CSS...
    Tu fixes le format de TOUTES tes images....

    Il faut que tu créés un style exprès pour le conteneur de tes images (de ta banière...)

    un truc du genre par exemple..

    #toto img {
    width:900px;
    height:250px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 175px;
    border-radius: 15px;
    box-shadow: 0px 4px 4px #1c1a19;
    }

    1. Bonjour Jordane,

      J'ai essayé. Lorsque je remplace img par #toto img toutes les photos sont reformatées. Merci.
      Cordialement

      Claudio
      1. Modérateur
        #toto{
            width:900px;
            height:250px;
         display: inline-block;
          margin-top: 5px;
          margin-bottom: 5px;
          margin-left: 175px;
          border-radius: 15px;
          box-shadow: 0px 4px 4px #1c1a19;
        }
        
        img {
            width:400px;
            height:250px;
         display: inline-block;
          margin-top: 5px;
          margin-bottom: 5px;
          margin-left: 175px;
          border-radius: 15px;
          box-shadow: 0px 4px 4px #1c1a19;
        }
        
        

        1. ça marche

          Merci

          Claude