Carte interactive

**alaaKH** · 02/07/2015, 14h26

bonjour ;

j'ai réaliser une petite carte svg en utilisant SVG, je vaudrais que à chaque mouseover l'identifiant (id) de la zone s'affiche comme l'exemple suivant: , et aussi si quelqu'un a une idée sur l'ajout du zoom

voila ma carte svg :

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
<html>
<head>
 
<meta charset="ISO-8859-1">
<title>les regions du maroc 12</title>
  <link rel="stylesheet" type="text/css" href="../style/style.css" title="style" />
<style type="text/css">
 
 svg  path:hover {fill :#FF7F50 }
 
 .map g {
  fill: #6495ED;
  stroke: #333;
  stroke-width: 1;
}
</style>
</head>
<body>
<div class="map">
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="91.446587mm"
   height="88.283783mm"
   viewBox="0 0 324.02334 312.81655"
  ">
  <g inkscape:label="Calque 1" inkscape:groupmode="layer"  id="layer1"  transform="translate(-195.07415,-387.53806)">
 
    <path id="Ville 1"
       d="m 366.56834,440.06557 c -1.56055,-0.85942 -2.83736,-3.00299 -2.83736,-4.7635 0,-2.97373 -0.62602,-3.13135 -8.82005,-2.22078 -5.66251,0.62926 -9.20854,0.38582 -9.90522,-0.68001 -1.53597,-2.34985 6.44191,-9.74527 13.97993,-12.95924 5.09287,-2.17144 6.36669,-3.53045 6.36669,-6.79249 0,-2.67022 1.53915,-5.15502 4.4587,-7.19813 2.45229,-1.71612 6.20874,-6.43826 8.34766,-10.49364 3.57217,-6.77285 4.0652,-7.14552 6.05283,-4.57536 1.81448,2.34625 2.81959,2.51559 6.2246,1.04869 3.72666,-1.60547 4.13698,-1.40599 4.98784,2.42498 2.25371,10.14712 6.4323,12.72672 14.62895,9.03096 5.68976,-2.56543 6.10793,-2.56449 9.12897,0.0205 3.00685,2.57291 3.4115,2.57596 8.0469,0.0605 4.74893,-2.57702 4.96748,-2.55524 8.08672,0.80589 1.99769,2.15259 3.50145,2.79364 3.99013,1.70096 0.43133,-0.96444 2.1532,-1.41503 3.82637,-1.00132 2.19653,0.5431 3.78278,-0.60201 5.70659,-4.11954 1.78011,-3.25481 3.47924,-4.57609 5.11947,-3.98097 1.35026,0.48992 3.46346,0.89076 4.696,0.89076 2.4475,0 10.46462,10.25562 10.46462,13.3865 0,1.21276 -2.21439,1.94366 -5.88869,1.94366 -3.23878,0 -8.34603,1.43598 -11.34945,3.19106 -3.00341,1.75508 -5.46076,2.46922 -5.46076,1.58695 0,-0.88226 -1.52716,-2.3769 -3.39371,-3.32141 -4.27181,-2.16165 -11.3944,-0.65722 -10.24909,2.1648 0.45918,1.13142 -0.97603,3.17904 -3.18937,4.55027 -3.93154,2.4357 -4.10452,2.3703 -7.50973,-2.83928 -4.05452,-6.20292 -4.58453,-6.30118 -12.74798,-2.3634 -5.46673,2.63699 -6.07354,3.49417 -5.42611,7.66509 0.54233,3.49371 0.0937,4.69607 -1.75198,4.69607 -1.3645,0 -2.72575,0.69445 -3.02497,1.54323 -0.35344,1.00253 -2.31579,0.91091 -5.60081,-0.2615 -4.48564,-1.60089 -5.89225,-1.34176 -12.45428,2.29433 -4.06864,2.25447 -7.85991,5.4765 -8.42504,7.16006 -1.15527,3.44165 -2.01828,3.64115 -6.07837,1.40521 z"
       id="path3607"/>
    <path id="Ville 2"
       d="m 292.85832,506.64509 c -1.08092,-0.41465 -3.4627,-3.0447 -5.29282,-5.84459 -2.34507,-3.58767 -4.95501,-5.37938 -8.83979,-6.06846 -4.35807,-0.77304 -6.24444,-2.30588 -9.00882,-7.32052 -3.46486,-6.28531 -3.46826,-6.3786 -0.37509,-10.30303 2.00679,-2.5461 8.85075,-6.16747 19.16568,-10.14121 23.00726,-8.86335 38.90789,-17.34537 47.01485,-25.07955 5.64128,-5.38188 7.51242,-6.37461 9.32872,-4.94934 1.62322,1.27375 3.51592,1.33569 6.62814,0.21689 5.68501,-2.04368 4.79441,-2.36029 11.37083,4.04232 5.18138,5.04443 6.16727,5.43304 9.80615,3.86539 2.22772,-0.95971 4.0456,-3.03962 4.0456,-4.62873 0,-1.84079 2.5508,-4.16534 7.04372,-6.41898 6.67346,-3.34738 7.24643,-3.39887 10.89954,-0.97953 4.78847,3.17124 7.99832,3.27319 7.99832,0.25404 0,-1.26473 1.09441,-2.29952 2.43203,-2.29952 1.69548,0 2.43202,-1.61426 2.43202,-5.33022 0,-4.0521 1.01345,-5.95806 4.22645,-7.9486 3.74577,-2.32062 4.3838,-2.35253 5.61012,-0.28061 0.76102,1.28578 2.75213,3.93569 4.42469,5.88868 l 3.04102,3.55089 6.75169,-3.58791 c 3.7134,-1.97336 6.75166,-4.49567 6.75166,-5.60516 0,-3.09154 2.56842,-2.40285 5.34072,1.43206 l 2.49352,3.44929 6.53753,-3.44929 c 3.59564,-1.89711 8.94661,-3.43149 11.89104,-3.40973 4.60434,0.034 5.75056,0.85513 8.19086,5.86778 3.16923,6.50991 3.66269,10.95583 1.21602,10.95583 -0.89174,0 -1.62135,1.41492 -1.62135,3.14426 0,2.1444 -1.80453,3.85716 -5.67472,5.38613 -4.64541,1.83523 -5.67472,3.05248 -5.67472,6.71084 0,2.45794 1.17418,5.57918 2.60928,6.9361 1.55882,1.47389 2.30208,3.98669 1.84619,6.24156 -0.64414,3.18601 -0.1392,3.77444 3.2389,3.77444 3.17552,0 3.76076,0.55403 2.83392,2.68277 -2.7781,6.38053 -2.66948,8.51113 0.65033,12.75678 5.67901,7.26277 -0.33561,4.85587 -12.45106,-4.98261 -6.66732,-5.41429 -8.60278,-5.40863 -11.87708,0.0347 -2.25328,3.746 -4.58684,4.77598 -17.04416,7.52295 -9.42546,2.07842 -18.4378,5.36563 -25.97435,9.47406 -8.96084,4.88483 -15.79018,7.14211 -30.54825,10.09701 -23.68509,4.74229 -34.10471,4.98255 -36.44922,0.84045 -0.92311,-1.63088 -1.67839,-4.28339 -1.67839,-5.89446 0,-1.61107 -1.45054,-4.17042 -3.22343,-5.68745 -3.11864,-2.66856 -3.42174,-2.62875 -9.32276,1.22448 -3.35463,2.1905 -8.80904,5.04829 -12.12091,6.35065 -3.31187,1.30236 -6.80318,3.74878 -7.75845,5.43649 -1.63866,2.89504 -6.38434,3.79874 -10.88417,2.07262 z"
       id="path3609" />
 
    <path  id="Ville 3"
       d="m 499.92431,678.83361 c -9.6213,-3.69891 -9.39839,-3.43419 -34.38476,-40.83267 -8.71231,-13.04023 -9.57837,-13.85073 -14.79897,-13.85073 -3.0498,0 -6.45338,1.03474 -7.5635,2.29948 -2.76684,3.15227 -16.63674,2.99546 -26.3546,-0.29781 -6.77998,-2.29769 -8.72114,-4.07011 -16.10645,-14.70648 -9.22711,-13.28889 -6.99388,-12.38073 -22.77252,-9.26052 -3.80881,0.75318 -5.91673,-0.49877 -14.97055,-8.89149 l -10.53756,-9.7681 -6.62254,-24.52825 c -6.48996,-24.03715 -8.3359,-27.97175 -19.8695,-42.35161 -1.09985,-1.37126 -6.11445,-3.7196 -11.14357,-5.21852 -11.11044,-3.31145 -10.90716,-5.64691 0.9462,-10.8713 4.54407,-2.0028 9.58148,-4.50472 11.19426,-5.55984 2.46055,-1.60975 3.30831,-1.43964 5.26937,1.05739 1.28539,1.63668 2.33707,4.4841 2.33707,6.3276 0,5.89746 3.81615,7.33094 16.6619,6.25883 22.40593,-1.87001 40.60075,-6.30027 54.05442,-13.16172 6.98339,-3.56158 19.28291,-8.13959 27.33227,-10.17337 13.3168,-3.36466 17.46678,-5.62466 19.16288,-10.43574 0.3252,-0.92244 4.03135,1.18593 8.2359,4.68528 4.83847,4.02695 12.08238,7.89281 19.73406,10.5315 9.83446,3.3914 12.09058,4.77411 12.0955,7.41297 0.008,4.01713 3.27359,9.04962 15.98833,24.63532 7.24879,8.88558 9.93724,13.46011 9.91049,16.86317 -0.0202,2.56844 -1.09592,33.64388 -2.3905,69.05653 -1.29459,35.41269 -2.37248,66.62864 -2.39532,69.36893 -0.0491,5.89247 -1.06831,6.00303 -13.01231,1.41115 z"  />
 
    <path   id="Ville 4"
       d="m 246.18316,580.80746 c -4.06953,-2.10136 -10.58612,-3.64654 -17.49376,-4.14804 l -11.00836,-0.79921 -6.39952,-13.67657 c -3.51973,-7.5221 -7.92827,-15.21519 -9.79675,-17.09573 -1.86848,-1.88054 -3.76866,-6.07395 -4.22262,-9.31868 l -0.82538,-5.89948 15.97858,-5.07905 c 14.40514,-4.57889 16.31757,-5.63561 19.42093,-10.7311 6.22844,-10.2266 18.87644,-23.44913 25.47474,-26.63194 6.30386,-3.04077 6.54445,-3.0483 8.69223,-0.27182 1.21493,1.57053 2.62221,4.41165 3.12731,6.31361 0.68999,2.59816 2.47641,3.69366 7.18383,4.40539 4.77311,0.72167 6.98965,2.10785 9.30593,5.81978 2.69195,4.31394 4.55664,5.19989 16.2668,7.72871 16.63486,3.59232 20.69281,5.95059 28.36612,16.4849 4.88531,6.7068 7.31816,12.7428 11.67985,28.97816 3.03009,11.27875 5.52615,21.54831 5.54682,22.82121 0.0288,1.77466 -2.32563,2.41722 -10.09586,2.75533 -5.57338,0.24252 -11.59264,0.37042 -13.37613,0.28424 -28.7351,-1.38866 -63.16158,-1.43529 -64.58705,-0.0875 -2.52754,2.38984 -5.9498,1.91099 -13.23771,-1.85223 z"
      />
  </g>
</svg>
</body>
</html>

**01001111** · 03/07/2015, 01h14

Bonjour, tu peux essayer avec onmouseover

Code html :

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

1
2
3
4
 
<path   id="Ville 4"
       d="m 246.18316,580.80746 c -4.06953,-2.10136 -10.58612,-3.64654 -17.49376,-4.14804 l -11.00836,-0.79921 -6.39952,-13.67657 c -3.51973,-7.5221 -7.92827,-15.21519 -9.79675,-17.09573 -1.86848,-1.88054 -3.76866,-6.07395 -4.22262,-9.31868 l -0.82538,-5.89948 15.97858,-5.07905 c 14.40514,-4.57889 16.31757,-5.63561 19.42093,-10.7311 6.22844,-10.2266 18.87644,-23.44913 25.47474,-26.63194 6.30386,-3.04077 6.54445,-3.0483 8.69223,-0.27182 1.21493,1.57053 2.62221,4.41165 3.12731,6.31361 0.68999,2.59816 2.47641,3.69366 7.18383,4.40539 4.77311,0.72167 6.98965,2.10785 9.30593,5.81978 2.69195,4.31394 4.55664,5.19989 16.2668,7.72871 16.63486,3.59232 20.69281,5.95059 28.36612,16.4849 4.88531,6.7068 7.31816,12.7428 11.67985,28.97816 3.03009,11.27875 5.52615,21.54831 5.54682,22.82121 0.0288,1.77466 -2.32563,2.41722 -10.09586,2.75533 -5.57338,0.24252 -11.59264,0.37042 -13.37613,0.28424 -28.7351,-1.38866 -63.16158,-1.43529 -64.58705,-0.0875 -2.52754,2.38984 -5.9498,1.91099 -13.23771,-1.85223 z"
     onmouseover="function(event) { document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1"); }" />

pour le zoom je te conseille de passer par un ecouteur mousewheel, mais trouve les bonnes sources pour ça, car le delta varie selon les navigateurs, il faut normaliser. Après avoir obtenu le mousewheel tu pourras animer le div#map avec jquery par exemple.

bon courage

**alaaKH** · 03/07/2015, 16h21

Merci beaucoup pour l'aide, mais le fonction mouseover ne marche pas, pour vous expliquer plus voila cet exemple : http://www.amcharts.com/svg-maps/?ma...oWesternSahara

http://www.amcharts.com/svg-maps/?ma...oWesternSahara

Mercii

**01001111** · 03/07/2015, 17h33

Je viens de faire un test, j'ai compris mon erreur...
par exemple:

Code html :

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

1
2
 
onmouseover="function(event) { document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1"); }"

ne fonctionne pas tandis que

Code html :

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

1
2
 
onmouseover="document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1");"

ou

Code html :

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

1
2
 
onmouseover="(function(event) { document.querySelector('#id_du_noeud_ou_afficher').innerHTML=event.target.id.replace(/[0-9]+$/, "$1"); })(event)"

devraient fonctionner

**melka one** · 03/07/2015, 20h49

pour le scroll molette sa c'est ameliorer il existe maintenant l’événement wheel commun a tous les navigateurs

ajoute ce script pour zoomer qui utilise scale du css

Code :

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

1
2
3
4
5
6
7
8
var val=1
addEventListener('load',function(){document.getElementById('vgs').addEventListener('wheel',dirizoom, false)},false);
 
function dirizoom(e){
	e.preventDefault();
	e.deltaY < 0 ? val+=0.1 : val-=0.1;
	document.getElementById('vgs').style.transform='scale('+val+')';
}

**01001111** · 04/07/2015, 02h03

ça c'est amélioré, oui, mais pas totalement, dans mes tests j'ai constaté de grandes différences entre valeurs de deltaY entre plateformes...
de plus ce dernier bout de code ne peut fonctionner de manière unifiée car dans certains cas l'évènement est déclenché un fois avec une valeur correspondant à tous les crans de molette parcourus, dans d'autres cas, l'évènement est déclenché pour chaque cran de molette parcouru.
J'ai amélioré une fonction trouvée sur le net en prenant en considération ce problème.

Code javascript :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
(function(window,document) {
 
	var prefix = "", _addEventListener, _removeEventListener, onwheel, support;
	// detect event model
	if ( window.addEventListener ) {
		_addEventListener = "addEventListener";
	} else {
		_addEventListener = "attachEvent";
		prefix = "on";
	}
	if ( window.removeEventListener ) {
		_removeEventListener = "removeEventListener";
	} else {
		_removeEventListener = "detachEvent";
		prefix = "on";
	}
 
	// detect available wheel event
	support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
			  document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
			  "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
	window.addWheelListener = function( elem, callback, useCapture ) {
		_addWheelListener( elem, support, callback, useCapture );
 
		// handle MozMousePixelScroll in older Firefox
		if( support == "DOMMouseScroll" ) {
			_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
		}
	};
	window.removeWheelListener = function( elem, callback ) {
		_removeWheelListener( elem, support, callback );
 
		// handle MozMousePixelScroll in older Firefox
		if( support == "DOMMouseScroll" ) {
			_removeWheelListener( elem, "MozMousePixelScroll", callback );
		}
	};
	window.timeLastWheelEvent=-1;
	window.currentWheelChange=-1;
	function wrapperFunction ( originalEvent, callback ) {
		!originalEvent && ( originalEvent = window.event );
		// create a normalized event object
		var event = {
			// keep a ref to the original event object
			originalEvent: originalEvent,
			target: originalEvent.target || originalEvent.srcElement,
			type: "wheel",
			deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
			deltaX: 0,
			delatZ: 0,
			preventDefault: function() {
				originalEvent.preventDefault ?
					originalEvent.preventDefault() :
					originalEvent.returnValue = false;
			}
		};
		// calculate deltaY (and deltaX) according to the event
		if ( support == "mousewheel" ) {
			originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
		}
		// normalize deltaY
		var w=originalEvent.wheelDelta, d=originalEvent.detail, y=originalEvent.deltaY;
		if (d) {
			if (w) {
				event.deltaY=w/d/40*d>0?1:-1;
			} else {
				event.deltaY=-d/3;
			}
		} else if (w) {
			event.deltaY=-w/120;
		} else if (y && /mac/i.test(window.navigator.platform)) {
			event.deltaY=y*10;
		} else if (y) {
			event.deltaY=y/3;
		}
		if (Math.abs(event.deltaY)==1) {
			var time=(new Date()).getTime();
			if (window.timeLastWheelEvent==-1) {
				window.timeLastWheelEvent=time;
				window.currentWheelChange=event.deltaY;
			} else if (time-window.timeLastWheelEvent<40 && event.deltaY/Math.abs(event.deltaY)==window.currentWheelChange/Math.abs(window.currentWheelChange)) {
				window.timeLastWheelEvent=time;
				window.currentWheelChange+=event.deltaY;
			} else if (time-window.timeLastWheelEvent<40) {
				event.deltaY=window.currentWheelChange*4;
				window.currentWheelChange=-1;
				window.timeLastWheelEvent=-1;
				return callback(event);
			}
			setTimeout(function() {
				var timeDelayed=(new Date()).getTime();
				if (window.currentWheelChange!==0 && window.timeLastWheelEvent!=-1 && timeDelayed-window.timeLastWheelEvent>25) {
					event.deltaY=window.currentWheelChange*4;
					window.currentWheelChange=-1;
					window.timeLastWheelEvent=-1;
					return callback(event);
				}
			}, 25);
		} else {
			window.currentWheelChange=-1;
			window.timeLastWheelEvent=-1;
			return callback(event);
		}
	}
	function _addWheelListener( elem, eventName, callback, useCapture ) {
		elem[ _addEventListener ]( prefix + eventName, function(event) { wrapperFunction(event, callback); }, useCapture || false );
	}
 
	function _removeWheelListener( elem, eventName, callback ) {
		elem[ _removeEventListener ]( prefix + eventName, function(event) { wrapperFunction(event, callback); });
	}
 
})(window,document);

**melka one** · 04/07/2015, 12h04

on se moque de la valeur retourné l’essentiel est de savoir si elle est négative ou positive de plus dans le code il y a beaucoup de choses inutiles tel le support de ie <=8 vue qu'il s'agit de svg et que ie<=8 ne le supporte pas

sinon il y a cette version qui fonction avec les navigateur recent et anciens sauf ie<=8 car dans notre cas pas besoin.

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
var val=1
function zoom(e){
	e.preventDefault();
	var delta = 0;
 
	if (e.wheelDelta) {
		delta = e.wheelDelta/120; 
	} 
 
	else if (e.detail) {
		delta = -e.detail/3;
	}
 
	delta < 0 ? val-=0.1 : val+=0.1;
	document.getElementById('vgs').style.transform='scale('+val+')';
}
 
 
function init_z(){
	var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
	document.getElementById('vgs').addEventListener(elmouse, zoom, false);
}
	addEventListener('load',init_z,false);

**01001111** · 04/07/2015, 16h26

Vous pouvez vous moquer de la valeur retournée, mais je répète qu'en faisant ainsi, le scroll en cas de scroll sur plusieurs crans ne se comportera pas de la même manière sur tous les navigateurs même récents.

**melka one** · 05/07/2015, 16h34

pour mois c'est de la prise de tête pour rien je sais que le code que j'ai mis est petit mais il reste totalement efficace je vient de refaire des testes pour l'histoire des crans et tous les crans sont pris en compte je voit pas pourquoi il y a probleme a faire de cette facon puisque plutot que de subir on controle totalement le scroll

peut etre que j'ai oublié un facteur a ce moment il faudrait donner un exemple

**01001111** · 05/07/2015, 21h50

Ce que je vous explique, c'est que certains navigateurs lancent un seul évènement pour plusieurs crans, d'autres lancent un évènement par cran. C'est aussi dépendant de la plateforme...
Je travaille sur linux, windows et mac, donc je sais à travers mes tests sur plusieurs navigateurs et sur chaque plateforme, qu'il en est ainsi.
Tester donc la valeur juste pour sa différence avec 0 entraîne une différence dans le comportement selon les plateformes et navigateurs.
De plus il faut mettre un maximum pour la valeur de scale et un minimum, pour une expérience utilisateur meilleure et pas de valeur de scale négative.
bonne soirée.

Code javascript :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
(function(window,document) {
 
	var prefix = "", _addEventListener, _removeEventListener, onwheel, support;
	// detect event model
	if ( window.addEventListener ) {
		_addEventListener = "addEventListener";
	} else {
		_addEventListener = "attachEvent";
		prefix = "on";
	}
	if ( window.removeEventListener ) {
		_removeEventListener = "removeEventListener";
	} else {
		_removeEventListener = "detachEvent";
		prefix = "on";
	}
 
	// detect available wheel event
	support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
			  document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
			  "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
	window.addWheelListener = function( elem, callback, useCapture ) {
		_addWheelListener( elem, support, callback, useCapture );
 
		// handle MozMousePixelScroll in older Firefox
		if( support == "DOMMouseScroll" ) {
			_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
		}
	};
	window.removeWheelListener = function( elem, callback ) {
		_removeWheelListener( elem, support, callback );
 
		// handle MozMousePixelScroll in older Firefox
		if( support == "DOMMouseScroll" ) {
			_removeWheelListener( elem, "MozMousePixelScroll", callback );
		}
	};
	window.timeLastWheelEvent=-1;
	window.currentWheelChange=-1;
	function wrapperFunction ( originalEvent, callback ) {
		!originalEvent && ( originalEvent = window.event );
		// create a normalized event object
		var event = {
			// keep a ref to the original event object
			originalEvent: originalEvent,
			target: originalEvent.target || originalEvent.srcElement,
			type: "wheel",
			deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
			deltaX: 0,
			delatZ: 0,
			preventDefault: function() {
				originalEvent.preventDefault ?
					originalEvent.preventDefault() :
					originalEvent.returnValue = false;
			}
		};
		// calculate deltaY (and deltaX) according to the event
		if ( support == "mousewheel" ) {
			originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
		}
		// normalize deltaY
		var w=originalEvent.wheelDelta, d=originalEvent.detail, y=originalEvent.deltaY;
		if (d) {
			if (w) {
				event.deltaY=w/d/40*d>0?1:-1;
			} else {
				event.deltaY=-d/3;
			}
		} else if (w) {
			event.deltaY=-w/120;
		} else if (y && /mac/i.test(window.navigator.platform)) {
			event.deltaY=y*10;
		} else if (y) {
			event.deltaY=y/3;
		}
		if (Math.abs(event.deltaY)==1) {
			var time=(new Date()).getTime();
			if (window.timeLastWheelEvent==-1) {
				window.timeLastWheelEvent=time;
				window.currentWheelChange=event.deltaY;
			} else if (time-window.timeLastWheelEvent<40 && event.deltaY/Math.abs(event.deltaY)==window.currentWheelChange/Math.abs(window.currentWheelChange)) {
				window.timeLastWheelEvent=time;
				window.currentWheelChange+=event.deltaY;
			} else if (time-window.timeLastWheelEvent<40) {
				event.deltaY=window.currentWheelChange*4;
				window.currentWheelChange=-1;
				window.timeLastWheelEvent=-1;
				return callback(event);
			}
			setTimeout(function() {
				var timeDelayed=(new Date()).getTime();
				if (window.currentWheelChange!==0 && window.timeLastWheelEvent!=-1 && timeDelayed-window.timeLastWheelEvent>25) {
					event.deltaY=window.currentWheelChange*4;
					window.currentWheelChange=-1;
					window.timeLastWheelEvent=-1;
					return callback(event);
				}
			}, 25);
		} else {
			window.currentWheelChange=-1;
			window.timeLastWheelEvent=-1;
			return callback(event);
		}
	}
	function _addWheelListener( elem, eventName, callback, useCapture ) {
		elem[ _addEventListener ]( prefix + eventName, function(event) { wrapperFunction(event, callback); }, useCapture || false );
	}
 
	function _removeWheelListener( elem, eventName, callback ) {
		elem[ _removeEventListener ]( prefix + eventName, function(event) { wrapperFunction(event, callback); });
	}
 
})(window,document);
 
addWheelListener(document, zoom, false);
var val=1;
function zoom(e){
	e.preventDefault();
	var delta = e.deltaY;
	val+=delta/40;
	val=val<0.25?0.25:(val>4?4:val);
	document.getElementById('vgs').style.transform='scale('+val+')';
}

**melka one** · 06/07/2015, 12h25

je vient d'essayer le script et on perd en fluidité

je suis sur windows donc après faut voir sur les autres os

sinon j'ai bien aimé l’opérateur ternaire dans l’opérateur ternaire

**01001111** · 06/07/2015, 13h09

oui, je sais qu'on perd en fluidité, mais seulement sur certains navigateurs (lequel utilisez-vous?), c'est du à la temporisation pour unifier les évènements de wheel.
On n'aurait pas besoin de passer par là si les navigateurs étaient tous sur les même normes.

après il y a peut-être un moyen de faire autrement, perso j'avais fait ça pour une interface de scroll qui répond par animation, la première idée que j'ai eue est la temporisation, mais peut-être qu'incrémenter une variable avec les valeurs de delta sans temporiser fonctionnerait mieux,
je vais faire des tests.

Carte interactive

JavaScript

Discussions similaires

Partager

Partager