Scrolling horizontal au survol d'images

Version imprimable

23/05/2008, 17h02
will89

Scrolling horizontal au survol d'images

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
23/05/2008, 17h30
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.

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:

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:

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 ?)

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:

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:

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.