Comment zoomer sur une image avec la molette en SVG [Résolu]

Pitus · 18/04/2011, 13h47

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, 13h57

DOMMouseScroll pour Firefox, onmousewheel pour les autres navigateurs.

Pitus · 18/04/2011, 14h49

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

mekal · 18/04/2011, 15h53

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, 16h07

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

18/04/2011, 13h47	#1
Pitus Invité de passage Inscription : octobre 2010 Messages : 14 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 14 Points : 3 Points : 3	Comment zoomer sur une image avec la molette en SVG 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 =)
	00

18/04/2011, 13h57	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	DOMMouseScroll pour Firefox, onmousewheel pour les autres navigateurs. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

18/04/2011, 14h49	#3
Pitus Invité de passage Inscription : octobre 2010 Messages : 14 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 14 Points : 3 Points : 3	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
	00

21/04/2011, 16h07	#5
Pitus Invité de passage Inscription : octobre 2010 Messages : 14 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 14 Points : 3 Points : 3	Merci mekal pour cet exemple j'ai réussit à l'adapter à mon code.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email