Comment zoomer sur une image avec la molette en SVG

**Pitus** · 18/04/2011, 14h47

Bonjour à tous,

Je vous explique mon problème: je dois créer une zone SVG dans laquelle se trouve une image (en SVG). Je dois inclure la fonction suivante: lorsque je fais rouler la molette vers l'avant avec la souris sur l'image je souhaite que mon image soit zoomer et dézoomer en faisant rouler la molette vers l'arrière.
Je ne sais pas quelle fonction utiliser...

En espérant avoir était clair dans mes explications =)

**Bovino** · 18/04/2011, 14h57

DOMMouseScroll pour Firefox, onmousewheel pour les autres navigateurs.

**Pitus** · 18/04/2011, 15h49

Merci de ta réponse aussi rapide =)

Tu aurais un exemple de code qui montre les attributs de la fonction DOMMouseScroll et comment l'utiliser dans un code HTML? S'il te plait

Merci d'avance

Invité · 18/04/2011, 16h53

un 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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
<style type="text/css">
 
div{
	background-color:#5db375;
	height:200px;
	width:200px;
	opacity:0.5
}
 
</style>
<script type="text/javascript">
 
var opa=50
 
function deplace(e){
 
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : e.preventDefault();	
 
var delta = 0;
 
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3)
 
var val=((delta<0) ? 10 : -10)
 
change(val)
}
 
 
function change(valeur){
 
var elem=document.getElementById('element')
 
opa+=valeur;
 
if(opa>=0 && opa<=100){
 
		if(document.all && !window.opera){ 
			elem.style.filter = 'alpha(opacity=' + opa + ')';
		} 
		else{
			elem.style.opacity = opa/100;
		}
		}
}
 
 
function init(){
 
var el=document.getElementById('element')
 
if(navigator.appName.substring(0,5)=="Micro"){
el.attachEvent('onmousewheel',deplace);
 
}
else{
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
el.addEventListener(elmouse,deplace, false);
 
}
}
 
onload=init
</script>
</head>
<body>
<br>
<div id='element'></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

**Pitus** · 21/04/2011, 17h07

Merci mekal pour cet exemple j'ai réussit à l'adapter à mon code.

Comment zoomer sur une image avec la molette en SVG

JavaScript

Vue hybride

Discussions similaires

Partager

Partager