Faire glisser une image trop grande avec la souris

**avogadro** · 27/07/2006, 15h00

Bonjour,

tout dabord un petit schéma...

Alors, en bleu foncé cest l'image, la partie achurée est donc le bout de l'image que je ne vois pas.

Sur les fleches rouges il faudrait mettre une action sur leur propriété onMouseOver afin que l'image glisse toute seul pour pouvoir voir ce qui été caché...

Je pense qu'en gros j'ai été assez claire. Alors voila est ce que quelqu'un a un début de script que je pourais un peu modifié (je m'y connais pas encore trop donc ... un peu d'indulgence lol)

Merci encore

cordialement,

**danyboy85** · 27/07/2006, 15h14

Un truc comme ca par exemple ?

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
21
22
23
24
25
 
<HTML>
<HEAD>
<TITLE>The onmove event</TITLE>
<SCRIPT>
// Turn on 2-D positioning
document.execCommand("2D-position",false,true);
 
function fnHandleMove() {
  oXDelta.innerText = event.srcElement.offsetLeft;
  oYDelta.innerText = event.srcElement.offsetTop; 
}
</SCRIPT>
</HEAD>
<BODY onmove="fnHandleMove();">
<B>Current Object:</B><BR>
X delta: <SPAN id=oXDelta>n/a</SPAN><BR>
Y delta: <SPAN id=oYDelta>n/a</SPAN><BR>
 
<DIV CONTENTEDITABLE="true">
<DIV style="width:300px;height:100px; background-color:red; position:absolute;">
Movable DIV</DIV>
</DIV>
</BODY>
</HTML>

Au fait, ton cadre noir il correspond a quoi ?

**avogadro** · 27/07/2006, 15h19

Envoyé par danyboy85

Au fait, ton cadre noir il correspond a quoi ?

oops dsl, le cadre noir, cest l'écran ! l'image sort de l'écran.

Ton script n'est pas éxactement ce que je cherchais :/

**danyboy85** · 27/07/2006, 15h21

Eh bien tu dois avoir la scrollbar horizontale du navigateur non ?

**avogadro** · 27/07/2006, 15h26

Envoyé par danyboy85

Eh bien tu dois avoir la scrollbar horizontale du navigateur non ?

je ne la veux pas :] c'est pas beau, surtout quand tu utilises des includes ou des frames, cest moche...

**danyboy85** · 27/07/2006, 15h32

Et ca ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<html>
	<div style="width:100;height:100;overflow:auto;border:1px solid #000000">
                 // a la place du tableau tu mets ton image
	     <table width="300" border=1>
	            <tr>
	                <td>aaa</td>
	            </tr>
	     </table>
	</div>
</html>

**avogadro** · 27/07/2006, 15h43

Envoyé par danyboy85

Et ca ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<html>
	<div style="width:100;height:100;overflow:auto;border:1px solid #000000">
                 // a la place du tableau tu mets ton image
	     <table width="300" border=1>
	            <tr>
	                <td>aaa</td>
	            </tr>
	     </table>
	</div>
</html>

ici je vois un petit cadre avec des scroll barre, moi ça serait plus un truc du genre :

CSS:

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
div#map {
    background-image:  url(./arriere_plan.jpg);
    background-repeat: no-repeat;
    height: xxxpx;
    width: xxxpx;
}
 
div#fleche_droite{
    background-image:  url(./fleche_droite.jpg);
    left: xxpx;  // tout a droite de l'écran
    top: xxpx;
}
 
div#fleche_gauche{
    background-image:  url(./fleche_gauche.jpg);
    left: xxpx;  // tout a gauche de l'écran
    top: xxpx;
}

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="map">
   <div id="fleche_gauche"></div>
   <div id="fleche_droite"></div>
</div>

Et rajouter une propriété OnMouseOver quelque part avec les fonction glisserdroite(); et glissergauche(); je pense!

**avogadro** · 27/07/2006, 17h28

peut etre une fonctione pour déplace une frame vers la droite ou la gauche, ou juste une image, je sais pas du tout :s

**danyboy85** · 27/07/2006, 17h56

Avec la scrollBar, tout est créé et tu n'as rien a gérer. Pourquoi s'embêter à créer des flèches ? Je ne comporend pas où tu veux en venir

**Hibou57** · 27/07/2006, 18h08

Bon, je ne me suis pas penché en détail sur les solutions précédement proposées, vu qu'elles ne te conviennent pas.

Résumons : si je te comprends bien, tu veux une options de défilement automatique, quand la souris par exemple est placée à proximité d'un des bord. Un peu comme sur un traitement sur texte, quand tu fais une selection de texte à la souri, si le texte que tu veux selectionner est plus haut que la page, alors tu continu à faire glisser la souris, et et quand la souris arrive à proximité du bord inférieur de la fenêtre, par exemple, alors le texte défile automatiquement.

Ce que je te propose (mais sans donner de code, je n'ai pas le temps) : tu peux créer deux boite transparante (invisible) à droite et à gauche de l'écran. Tu leur donne la propriété « position:absolute », bien sure. Tu donne à ces boites la hauteur de l'espace d'affichage (height:100%), et une largeur par exemple d'environ 15 ou 20 pixels (width:20px). Pour placer celle de gauche : « left:0; top:0; ». Pour placer celle de droite: « right:0; top: 0; ».

Tu définie ces deux boites avec un id : par exemple #left-scroll-control { ... } et #right-scroll-control { ... }. Tu les intègre dans ton document html avec des div : <div id="left-scroll-control"> et <div id="right-scroll-control">. Et à chacun de ces éléments, tu associe un handler (procédure de traitement d'événement) pour onMouseOver. Ces deux routines onMouseOver, une pour le control et gauche, et une pour celui de droite, modifie la propriété top et left de ton image, que tu intègre en lui donnant un id également, bien sure.

Voilà... ce que m'inspire ta question.

J'epère que c'est assez compréhensible et que ça pourra te donner des idées.

**avogadro** · 28/07/2006, 09h21

voila éxactement ce que je cherche à faire ^^

**danyboy85** · 28/07/2006, 09h22

Envoyé par avogadro

voila éxactement ce que je cherche à faire ^^

???

**avogadro** · 28/07/2006, 09h25

Envoyé par Hibou57

Bon, je ne me suis pas penché en détail sur les solutions précédement proposées, vu qu'elles ne te conviennent pas.

Résumons : si je te comprends bien, tu veux une options de défilement automatique, quand la souris par exemple est placée à proximité d'un des bord. Un peu comme sur un traitement sur texte, quand tu fais une selection de texte à la souri, si le texte que tu veux selectionner est plus haut que la page, alors tu continu à faire glisser la souris, et et quand la souris arrive à proximité du bord inférieur de la fenêtre, par exemple, alors le texte défile automatiquement.

Ce que je te propose (mais sans donner de code, je n'ai pas le temps) : tu peux créer deux boite transparante (invisible) à droite et à gauche de l'écran. Tu leur donne la propriété « position:absolute », bien sure. Tu donne à ces boites la hauteur de l'espace d'affichage (height:100%), et une largeur par exemple d'environ 15 ou 20 pixels (width:20px). Pour placer celle de gauche : « left:0; top:0; ». Pour placer celle de droite: « right:0; top: 0; ».

Tu définie ces deux boites avec un id : par exemple #left-scroll-control { ... } et #right-scroll-control { ... }. Tu les intègre dans ton document html avec des div : <div id="left-scroll-control"> et <div id="right-scroll-control">. Et à chacun de ces éléments, tu associe un handler (procédure de traitement d'événement) pour onMouseOver. Ces deux routines onMouseOver, une pour le control et gauche, et une pour celui de droite, modifie la propriété top et left de ton image, que tu intègre en lui donnant un id également, bien sure.

Voilà... ce que m'inspire ta question.

J'epère que c'est assez compréhensible et que ça pourra te donner des idées.

ceci me semble un bon résumé!

**danyboy85** · 28/07/2006, 10h06

Bon je t'ai développé un pti truc en speed, c'est à améliorer mais ca devrait correspondre à ce que tu cherches :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<script language="javascript">
var mouseOverActive=false;
 
function active(cote) {
          mouseOverActive = true;
          decaler(cote);
}
 
function desactive() {
         mouseOverActive=false;
}
 
function decaler(cote) {
         if (mouseOverActive) {
            if (cote=="G") {
               try {
                   document.body.scrollLeft =  document.body.scrollLeft - 1;
                   placerBoutons();
                   decaler(cote);
               } catch (ex) {
 
               }
 
            } else if (cote=="D") {
               try {
                   document.body.scrollLeft =  document.body.scrollLeft + 1;
                   placerBoutons();
                   decaler(cote);
               } catch (ex) {
 
               }
 
            }
         }
}
 
function placerBoutons() {
         document.getElementById("btG").style.left = document.body.scrollLeft;
         document.getElementById("btD").style.left = document.body.scrollLeft+400; //valeur en dur, à améliorer
}
</script>
<html>
      <body scroll=no>
	     <table width="1000" border=1>
	            <tr>
	                <td>aaa</td>
	            </tr>
	     </table>
	     <br>
	     <input type="button" id="btG" onmouseover="active('G')" onmouseout="desactive()" style="position:absolute;left:0">
	     <input type="button" id="btD" onmouseover="active('D')" onmouseout="desactive()" style="position:absolute;left:400">
      </body>
</html>

**avogadro** · 28/07/2006, 10h40

ah oui je vois... mais ça marche chez toi?? chez moi ni sous FF ni sous IE, jai modifié quelque petits truc mais toujours pas :s

**danyboy85** · 28/07/2006, 10h58

Eh bien chez moi ca marche sous IE et sous FF

Qu'est ce qui se passe chez toi tu as un message d'erreur ?

Pour que ca marche fais en sorte que la largeur de ton navigateur sous inférieure à la largeur du tableau html

**avogadro** · 28/07/2006, 11h40

hmm oui ça marche, le bouge en fait toute la page et je recentre les bouton, ya moyen de l'améliorer mais cest un début, par contre chez moi les scrollbarre s'affiche quand meme

voila qui règle le pb :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function cacher()   {     
document.body.style.overflow='hidden';  
 }

dans le body onLoad

**avogadro** · 28/07/2006, 12h52

bon alors voila, moi jai ça :

HTML :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html><head>
 
 
<link rel="stylesheet" type="text/css" href="./style.css" media="all" />
<script type="text/javascript">
function cacher()   {     document.body.style.overflow='hidden';   } 
 
 
var mouseOverActive=false;
 
function active(cote) {
          mouseOverActive = true;
          decaler(cote);
}
 
function desactive() {
         mouseOverActive=false;
}
 
function decaler(cote) {
         if (mouseOverActive) {
            if (cote=="G") {
               try {
                   document.body.scrollLeft =  document.body.scrollLeft - 1;
                   placerBoutons();
                   decaler(cote);
               } catch (ex) {
 
               }
 
            } else if (cote=="D") {
               try {
                   document.body.scrollLeft =  document.body.scrollLeft + 1;
                   placerBoutons();
                   decaler(cote);
               } catch (ex) {
 
               }
 
            }
         }
}
 
function placerBoutons() {
         document.getElementById("div_gauche").style.left = document.body.scrollLeft;
         document.getElementById("div_droit").style.left = document.body.scrollLeft+400; //valeur en dur, à améliorer
}
</script> 
 
 
</head>
 
<body onLoad=cacher();>
 
 
 
		<div id="map">
 
		<div id="div_droit" onmouseover="active('G')" onmouseout="desactive()"></div>
		<div id="div_gauche" onmouseover="active('D')" onmouseout="desactive()"></div>
 
 
 
		</div>		
 
 
 
</body></html>

CSS:

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
21
22
23
24
25
div#map {
    background-image:  url(./image.jpg);
    background-repeat: no-repeat; 
    height: 731px;
    width: 1600px;   
}
 
div#div_gauche {
	 background-color: #FFFFCC ;
    left: 0px;
    top: 0px;
}
 
div#div_droit {
	 background-color: #FFFFCC ;
    right: 0px;
    top: 0px;
}
 
#div_droit, #div_gauche {
	background-repeat: no-repeat;
    position: absolute;    
    height: 100%;
    width:20px
}

Problème 1 :
une fois que l'image a commencé a glisser, elle ne s'arrete plus quand j'enleve la souris du div :s

Problème 2 :
le div de droit se met a left +400 lors de la premiere translation, normal vous me direz, mais j'arrive pas a lui dire de rester sur le bord droit !

**danyboy85** · 28/07/2006, 14h15

Cette fois je crois que je tiens le bon bout :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<html><head>
 
 
<link rel="stylesheet" type="text/css" href="./style.css" media="all" />
<script type="text/javascript">
function cacher()   {     document.body.style.overflow='hidden';   } 
 
 
var mouseOverActive=false;
 
function active(cote) {
          mouseOverActive = true;
          decaler(cote);
}
 
function desactive() {
         mouseOverActive = false;
}
 
function decaler(cote) {
         if (mouseOverActive) {
            if (cote=="G") {
               try {
                   document.getElementById("map").scrollLeft =  document.getElementById("map").scrollLeft - 1;
                   setTimeout("decaler('" + cote + "')", 10);
                   //decaler(cote);
               } catch (ex) {
 
               }
 
            } else if (cote=="D") {
               try {
                   document.getElementById("map").scrollLeft =  document.getElementById("map").scrollLeft + 1;
                    setTimeout("decaler('" + cote + "')", 10);
                   //decaler(cote);
               } catch (ex) {
 
               }
 
            }
         }
}
 
</script> 
 
 
</head>
 
<body onLoad=cacher();>
 
      <table>
             <tr>
                 <td colspan="2">
                     	<div id="map" style="width:200;height:200;border:1px solid #000000;overflow:hidden">
                             <table width="1000" border=1>
                	                <tr>
                	                    <td>aaa</td>
    	                                <td>bbb</td>
   	                                    <td>ccc</td>
    	                                <td>ddd</td>
                	                </tr>
                	             </table>
                		</div>
                 </td>
             </tr>
             <tr>
                 <td><div id="div_droit" onmouseover="active('G')" onmouseout="desactive()" style="background-color:#000000;width:10px;height:10px"></div></td>
                 <td align="right"><div id="div_gauche" onmouseover="active('D')" onmouseout="desactive()" style="background-color:#000000;width:10px;height:10px"></div></td>
             </tr>
      </table>
</body></html>

**avogadro** · 28/07/2006, 14h39

ça marche en effet, tu cré un tableau et les bouton qui te serve et le décalé sont hors du tableau, en effet cette méthode marche, ds mon cas mes div sont ds la meme zone donc un peu différent...

Pour ton premier code, tu as une fonction infinie, je pense qu'il faudrait metre un settimeout sur la fonction, sinon sa glisse jusquau bou sans possibilité d'arréter l'image, tu vois le genre?

quelque chose du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function setTimeout('decaler(cote)', 100)

(pas sur de la syntaxe)

Faire glisser une image trop grande avec la souris

JavaScript

Discussions similaires

Partager

Partager