Partage
  • Partager sur Facebook
  • Partager sur Twitter

PANORAMIQUE

Défilement d'une image

Med
    11 février 2006 à 14:15:51

    Plaçons une image panoramique de 3200 x 60 pixels (par exemple) sur une page et faisons-la défiler à gauche ou à droite selon la position de la souris (bord gauche ou droit de la photo).
    Le défilement s'arrête bien sûr si le pointeur sort de la zone (gauche ou droite) de la photo qui lance le défilement.

    Ce serait sympa mais... comment faire ?

    D'avance, MERCI.
    • Partager sur Facebook
    • Partager sur Twitter
    shuss
      11 février 2006 à 14:43:59

      Tu as de la chance, j'avais fait un script de ce genre y a quelques jours :

      Voic le fichier principal :
      <html>
      <SCRIPT LANGUAGE="javascript">
      <!--
      function deplace(direction)
              {
              var interval = 10;
              mouvement = setInterval("move('" + direction + "');",interval);
              }

      function stop()
              {
              clearInterval(mouvement);
              }

      function move(direction)
              {
              var distance = 2;
              var posx = parseInt(window.image.document.photo.style.left);
              var posy = parseInt(window.image.document.photo.style.top);
              if (direction == 'n')
                      {
                      posy += distance;
                      }
              else if (direction == 's')
                      {
                      posy -= distance;
                      }
              else if (direction == 'e')
                      {
                      posx -= distance;
                      }
              else if (direction == 'o')
                      {
                      posx += distance;
                      }
              else if (direction == 'ne')
                      {
                      posy += distance;
                      posx -= distance;
                      }
              else if (direction == 'se')
                      {
                      posy -= distance;
                      posx -= distance;
                      }
              else if (direction == 'so')
                      {
                      posy -= distance;
                      posx += distance;
                      }
              else if (direction == 'no')
                      {
                      posy += distance;
                      posx += distance;
                      }
              window.image.document.photo.style.top = posy + "px";
              window.image.document.photo.style.left = posx + "px";
              }
      -->
      </SCRIPT>
      <object style="position:absolute; top:100px; left:100px; overflow:hidden; z-index:20;" id="image" name="image" data="image.htm" height="100" width="100"></object>
      <map id="mamap" name="map">
      <area shape="rect" coords="0,20,20,120" onMouseDown="deplace('o')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="120,20,140,120" onMouseDown="deplace('e')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="20,0,120,20" onMouseDown="deplace('n')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="20,120,120,140" onMouseDown="deplace('s')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="0,0,20,20" onMouseDown="deplace('no')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="120,0,140,20" onMouseDown="deplace('ne')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="120,120,140,140" onMouseDown="deplace('se')" onMouseUp="stop()" onMouseMove="stop()"/>
      <area shape="rect" coords="0,120,20,140" onMouseDown="deplace('so')" onMouseUp="stop()" onMouseMove="stop()"/>
      </map>
      <img style="position:absolute; top:80px; left:80px; z-index:10; border-style:none" src="bord.png" height="140" width="140" usemap="#map"/>

      </html>

      Et le fichier "image.htm" :
      <html>
      <img style="position:absolute; top:-100px; left:-100px;" id="photo" src="photo.jpg"/>
      </html>


      Noublie pas de créer une image "bord.png" (toute bleu par exemple, pour les bords) et "photo.jpg" qui sera l'image qui bougera.
      Il s'agit d'un object par dessus une image mappée : lorsque tu clique sur les bord (je n'es pas onMouseOver car ça buggait) l'image contenue dans la page "image.htm" elle-même dans la balise <object> se déplace. Les chemins javascript font un peu "old school" mais ça fonctionne :p
      Par contre je n'est pas arrété quand on arrive au bout de l'image (mais tu saura le faire je pense).
      • Partager sur Facebook
      • Partager sur Twitter
      Med
        12 février 2006 à 12:46:01

        Merci à toi Shuss. J'ai essayé, cela ne donne pas exactement ce que je voulais (le déplacement de l'image ne se fait que par le biais d'une cellule qui se superpose à l'image et non quand la souris s'approche des bords de l'image. Ou alors... je n'ai rien compris. Mais, je planche dessus pour m'imprégner du code et de ses effets (je n'y connais rien encore, désolé).
        Quant à programmer moi-même l'arrêt du défilement... c'est une autre aventure !
        MERCI
        • Partager sur Facebook
        • Partager sur Twitter

        PANORAMIQUE

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown