Pb défilement image

cs_virusss Messages postés 4 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 11 juillet 2007 - 5 juil. 2007 à 18:08
cs_virusss Messages postés 4 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 11 juillet 2007 - 11 juil. 2007 à 10:27
Bonjour,



 




Je fais un site pour un graphiste, comme il y a pas mal
d'image je préfère les faire défiler.


J'ai pour celà trouver un script java qui permet donc le
défilement des images quand on passe sur une flèche.


En fait y'a 2 flèches, une en haut pour le défilement vers
le haut, revenir vers la 1ère image.


Et une 2ème, pour descendre.


Or quand j'arrive à la dernière image, le défilement
continu  alors que je voudrais revenir à
la 1ère.



 




voici ce que ça donne
[url]http://www.prikosnovenie.com/design/feminite.html/url



 




et le script (que j'ai recupéré d'où les incohérences)



 




[cpp]<script language="javascript">



 




var Timer;


var Pas = 3; // vitesse défilement texte


var Img = 1; // le numéro de l'image à afficher


var End = 21; // le numéro de la dernière image



 




function moveLayer(Sens)



 {



 if(document.getElementById)



     Objet =
document.getElementById("Contenu" );



 else



     Objet =
document.all["Contenu"];



 if(parseInt(Objet.style.top) + (Pas*Sens) >
0)



     Objet.style.top =
"0px";



 else



     Objet.style.top =
(parseInt(Objet.style.top) + (Pas*Sens)) + "px";



 Timer =
setTimeout("moveLayer(" + Sens + " );", 50);



 }



 



 function
changeImage(value)



 { // si on avance
value 1, si on recule value -1



     Img = Img + value
;



     if (value == 1)



           
 {



       
 if (Img > End)



             Img = 1;
// si on dépasse la dernière image, on revient au début



     }



     else {



         if (Img <
1)



             Img =
End; // si on dépasse la première image (en reculant), on passe à la dernière



     }



     if (Img >= 1
&& Img <= 21)



        
Img.src='Test/0'+Img+'.jpg'; // si c'est <= 9 on met un 0 devant



     else



        
Img.src='Test/'+Img+'.jpg'; // sinon on affiche le numéro



 }



 





 





 



 </script>/cpp



 




Merci d'avance

9 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 juil. 2007 à 09:31
Bonjour,

    _ quand appelle-t-on changeImage(value) ?    qui est censé faire ce que tu veux.
    _ Img est un entier.       Img.src ça ne correspond à rien, si ?
    _ le "défilement "est assuré par function moveLayer(Sens)
       qui déplace le div 'contenu'.
      
       donc...  soit tu remets les "adresses" comme elles étaient au départ,
                    soit il faut voir autrement le défilement

<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 juil. 2007 à 09:33
pour faire ça "simplement" probablement que la balise <marquee> suffirait.
<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />
0
cs_virusss Messages postés 4 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 11 juillet 2007
6 juil. 2007 à 12:11
Effectivement changeImage(value) ne sert pas merci pour ta remarque


J'y comprends pas grand chose au javascript


Il me reste donc

<script language="javascript">

var Timer;

var Pas = 3; // vitesse défilement texte

function moveLayer(Sens)

{

if(document.getElementById)

Objet = document.getElementById("Contenu" );

else

Objet = document.all["Contenu"];

if(parseInt(Objet.style.top) + (Pas*Sens) > 0)

Objet.style.top = "0px";

else

Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";

Timer = setTimeout("moveLayer(" + Sens + " );", 50);

}

</script>

Je vais abandonner l'idée de passer à la 1ère image une fois arrivée à la dernière.
Quelqu'un a t-il une idée pour que le défilement vers le bas s'arrête à
la dernière image. Il le fait bien vers le haut en s'arrêtant à la 1ère
image.

Merci.
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
6 juil. 2007 à 12:33
regarde donc la balise <marquee>, elle est faite pour ça.
    tout ce fait en html ( this.start() et this.stop(), rien d'autre en javascript ).
<hr />


Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 juil. 2007 à 12:47
B
onjour...




Il le fait bien vers le haut en s'arrêtant à la 1ère




-> normal c'est géré



if(parseInt(Objet.style.top) + (Pas*Sens) > 0)



  Objet.style.top = "0px";






Quelqu'un a t-il une idée pour que le défilement vers le bas s'arrête à la dernière image




-> Il faut faire la même gestion pour l'arrivée en bas...
1/ Recup de la hauteur du DIV contenant
2/ Recup de la hauteur du DIV contenu
3/ Test quand
le top du contenu est inférieur à -(Hauteur_Contenu -Hauteur_Contenant) on stoppe tout...

;0)
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 juil. 2007 à 12:54
YO !

J'ai pas mal de soucis avec la mise en page 1000 excuses...
Pour info tu peux également voir <CHEVILLES QUI ENFLENT>l'Excellente source</CHEVILLES QUI ENFLENT> ICI et ne garder que ce qui t'intérresse...
PS : la balise <MARQUEE> restant un bon compromis..
;0)
0
cs_virusss Messages postés 4 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 11 juillet 2007
9 juil. 2007 à 12:15
J'ai donc regardé du côté de la balise <marquee> mais c'est quand même moins bien.
Elle ne sembe pas fonctionné sur tous les navigateurs même si c'est bon sur IE et firefox.
Puis le défilement vers le haut commence bien en haut du conteneur pour firefox mais en bas sous IE, c'est moins esthétique.
Et surtout mes flèches ne servent plus à rien alors que j'aime bien ce principe
Bref je m'y résoudrait si j'arrive vraiment pas à stopper le défilement des images à la dernière avec le javascript.

Pour le test quand :
le top du contenu est inférieur à -(Hauteur_Contenu -Hauteur_Contenant) on stoppe tout...

ça donnerai quoi en langage java:
if ..... >......

.stop()

histoire que je n'ai pus qu'a rentrer les valeurs ben oui je suis vraiment une merde en javascript

Merci encore pour vos conseils bienveillant
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
9 juil. 2007 à 20:22
B
onjour...
Tout d'abord on ne dis pas je suis une M...E en Java mais je débute en javascript.
La maison ne reculant devant aucun sacrifice, bien que le but ne soit pas d'obtenir une source toute faite, cela pourrait ressembler à cela.

<script type= "text/javascript" language="JavaScript">
var Timer;
var Pas = 3;  // vitesse défilement texte
var Img = 1;  // le numéro de l'image à afficher
var End = 11; // le numéro de la dernière image
var H_Fenetre = -1;
var H_Bandeau;
//----------------------
function moveLayer(Sens){
  var Obj;
  if( H_Fenetre < 0){
    //-- Recup hauteur objet defilant
    Obj = document.getElementById( "Contenu");
    H_Bandeau = Obj.offsetHeight;
    //-- Recup hauteur zone de defilement
    Obj = document.getElementById( "Support");
    H_Fenetre = Obj.offsetHeight;
  }
  //-- Recup Objet
  if(document.getElementById)
    Obj = document.getElementById("Contenu" );
  else
    Obj = document.all["Contenu"]; // Ne sert pas en grand chose

  //-- Recup Borne deplacement
  var Min_Y = -(H_Bandeau -H_Fenetre);
  var Pos_Y = parseInt(Obj.style.top) + (Pas*Sens); // prochaine position du DIV

  //-- Test des positions
  if( Pos_Y > 0){
    Obj.style.top = "0px"; // Place a zero
  }
  else{
    if( Pos_Y < Min_Y)
      Obj.style.top = Min_Y +"px";  // Place en position Haute mini
    else{





      //-- Deplacement autorise on deplace







      Obj.style.top = Pos_Y + "px";
      //-- et on y retourne
      Timer = setTimeout("moveLayer(" + Sens + " );", 50);
    }
  }
}
</script>




Il est cependant IMPORTANT de déclarer le DIV Contenu comme suit dans la page

height:auto; left: 510px; top: 0px;">

Cela devrait baigner sur la plupart des navigateurs.

;0)
0
cs_virusss Messages postés 4 Date d'inscription vendredi 11 mai 2007 Statut Membre Dernière intervention 11 juillet 2007
11 juil. 2007 à 10:27
Un grand merci,

Heu oui je dirais que je débute plutôt que je suis une m...., et la prochaine fois ce serait bien que ce soit moi qui vienne en aide à un autre.
Pour ça y'a du taff encore

Ton script est nickel, c'est beaucoup mieux qu'avec la balise <MARQUEE>, y'a de la maîtrise

Bonne journée,
0
Rejoignez-nous