Discussion :

[will89]

Apr�s des recherches infructueuses, je me tourne vers vous.
Voici mon probl�me : sur la page que voici il y a une galerie d�filante d'articles. La barre horizontale (qui apparait gr�ce au overflow:auto de ma page CSS) permet de les faire d�filer mais je voudrais aussi que le scrolling se fasse au survol des fl�ches roses sur les cot�s. Si quelqu'un a une solution simple � mettre en place parce que moi j'en ai trouv� aucune. Et en plus le javascript et moi �a a jamais �t� trop �a.

Bref, I need help

Merci d'avance

[Capt. Flame]

Moi j'utiliserais le scrollLeft.

Sur un mouseover de la fl�che tu pourrais cr�er un setInterval et, � interval r�gulier, modifier la valeur du scrollLeft.

[will89]

Merci pour cette r�ponse. Je pense que c'est une bonne piste mais c'est pas encore tout � fait �a. Du moins pas comme j'ai r�ussi � l'utiliser.

Je vous mets le code HTML :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
<div id="arrow_left"><img src="./images/element_bloc/fleche_defilement_gauche.jpg" alt="Vers la gauche"
     onMouseOver="doScroll(10)" onMouseOut="stopScroll()" /></div>
<div id="arrow_right"><img src="./images/element_bloc/fleche_defilement_droit.jpg" alt="Vers la droite"
     onMouseOver="doScroll(-10)" onMouseOut="stopScroll()" /></div>
<div id="theImages">
   <?php echo $galerie ?>
</div>

sachant que le PHP echo $galerie remplit la div theImages avec un tableau de environ 3000 pixels de large...

Et voici le javascript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/javascript">
      var intervalID;
 
      function doScroll(speed)
      {
        intervalID = setInterval(scroll(speed), 10);
      }
 
      function scroll(speed)
      {
        var elem = document.getElementById("theImages");
        elem.scrollLeft = speed;
      }
 
      function stopScroll()
      {
        clearInterval(intervalID);
      }
</script>

Vous pouvez voir ce que �a me fait actuellement ici : monshowroom.

Et quand j'ouvre la console d'erreur Javascript, j'ai ce message d'erreur :
useless setInterval call (missing quotes around arguments ?)

[will89]

Bon en fait c'est bon c'est moi qui me plantais dans l'utilisation de scrollLeft...
Je vous remets le code pour ce qui en auraient besoin et merci � Capt. Flame pour ses pistes.

HTML :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
<div id="arrow_left">
  <img src="./images/element_bloc/fleche_defilement_gauche.jpg" alt="Vers la gauche"
       onmouseover="ScrollLeft()" onmouseout="stopScroll()" />
</div>
<div id="arrow_right">
  <img src="./images/element_bloc/fleche_defilement_droit.jpg" alt="Vers la droite"
       onmouseover="ScrollRight()" onmouseout="stopScroll()" />
</div>
<div id="theImages">
  <?php echo $galerie ?>
</div>

Javascript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var intervalID;
 
function ScrollLeft()
{
  intervalID = setInterval("document.getElementById('theImages').scrollLeft -= 2", 30);
}
 
function ScrollRight()
{
  intervalID = setInterval("document.getElementById('theImages').scrollLeft += 2", 30);
} 
 
function stopScroll()
{
  clearInterval(intervalID);
}

Apr�s il y a plus que quelques r�glages sur la vitesse du d�filement � faire et c'est bon.