Faire glisser une image trop grande avec la souris

Version imprimable

27/07/2006, 15h00
avogadro

Faire glisser une image trop grande avec la souris

Bonjour,

tout dabord un petit schéma...
http://img83.imageshack.us/img83/301...tionub6.th.png

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,

Un truc comme ca par exemple ?

Code:

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 ?

27/07/2006, 15h19
avogadro

Citation:

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 :/
27/07/2006, 15h21
danyboy85

Eh bien tu dois avoir la scrollbar horizontale du navigateur non ?
27/07/2006, 15h26
avogadro

Citation:

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...

Et ca ?

Code:

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>

Citation:

Envoyé par danyboy85

Et ca ?

Code:

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:

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:

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!

27/07/2006, 17h28
avogadro

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
27/07/2006, 17h56
danyboy85

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
27/07/2006, 18h08
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.
28/07/2006, 09h21
avogadro

voila éxactement ce que je cherche à faire ^^
28/07/2006, 09h22
danyboy85

Citation:

Envoyé par avogadro

voila éxactement ce que je cherche à faire ^^

???
28/07/2006, 09h25
avogadro

Citation:

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é!

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

Code:

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>

28/07/2006, 10h40
avogadro

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
28/07/2006, 10h58
danyboy85

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
28/07/2006, 11h40
avogadro
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:

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

bon alors voila, moi jai ça :

HTML :

Code:

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:

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 !

Cette fois je crois que je tiens le bon bout :

Code:

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>

28/07/2006, 14h39
avogadro

ç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:

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

(pas sur de la syntaxe)
28/07/2006, 14h42
danyboy85

Citation:

Envoyé par danyboy85

...
...
try {
document.getElementById("map").scrollLeft = document.getElementById("map").scrollLeft - 1;
setTimeout("decaler('" + cote + "')", 10);
//decaler(cote);
} catch (ex) {

}
...
...

C'est bien ce que j'ai fait ! Non ?

Code:

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
<html><head>
 
 
<link rel="stylesheet" type="text/css" href="./style.css" media="all" />
 
<script language="javascript"src="./bouge_map.js"></script>
 
 
 
</head>
 
<body onLoad=cacher();>
 
 
      <div align="center"><table>
             <tr>
                 <td colspan="2">
                     	<div id="map" style="width:800;height:800;border:1px solid #000000;overflow:hidden">
                             <table width="1000" border="1px">
                             blop ^^
							</table>
                		</div>
                 </td>
             </tr>
             <tr>
                 <td><div id="div_droit" onmouseover="active('G')" onmouseout="desactive()"</div></td>
                 <td align="right"><div id="div_gauche" onmouseover="active('D')" onmouseout="desactive()"></div></td>
             </tr>
      </table></div>
</body></html>

jai une image ds le div map, placé à l'aide du css, pk elle bouge pas avec?

Code:

1
2
3
4
5
6
div#map {
    background-image:  url(./image.jpg);
    background-repeat: no-repeat; 
    height: 731px;
    width: 1600px;   
}

28/07/2006, 16h13
danyboy85

Parce que ce notre code permet de faire bouger c'est ce qu'il y a à l'INTERIEUR du div.
Si tu utilise le background du div pour afficher ton image, alors l'image appartient à l'objet div et non pas à ce qu'il y a l'intérieur.

Cela marcherait si tu faisais un <img src="tonImage"> à l'intérieur du div

Comprendo ?
28/07/2006, 16h17
avogadro

ouais je l'avais deja fait ça marchais comme ça... niquel merci :)

ya des modife a faire mais ça marche bien dans l'ensemble, je te remercie pour ton aide !
28/07/2006, 16h20
danyboy85

Eh bien ca tombe bien parce que je suis en weekend dans 10 minutes.

Bon weekend à toi et n'oublie pas le tag Résolu ;)
28/07/2006, 16h50
avogadro

Pièce jointe 3379

Je me suis un peu amusé ^^