Bonjour j'ai ce script qui me permet de faire un drag sur une image et de zoomer avec la molette mais moi je veux pouvoir faire le zoom avec un style.cursor='s-resize' qui zoom lorsqu'on va vers le haut avec le curseur et dézoomer quand on va vers le bas un peu comme ce que fait la molette actuellement mais avec un style.cursor='s-resize'.
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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/************************************************Zoom********************************************/
 
var tour=3;
var activatePan=false;//
var cz=5
 
function disableselecte(e){
return false;
}
function enableselecte(e){
return true;
}
 
function souris(s){
var dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement;
setX =((navigator.appName.substring(0,3)=="Mic") ? event.clientX : s.clientX) + dde.scrollLeft;
setY =((navigator.appName.substring(0,3)=="Mic") ? event.clientY : s.clientY) + dde.scrollTop;
return false;
}
 
(navigator.appName.substring(0,3)=="Net") ? document.documentElement.addEventListener("mousemove", souris, false) : document.documentElement.attachEvent('onmousemove', souris);
 
function cadrezoom(){
if(cz==5){
oper=adi.offsetWidth/adi.offsetHeight;
px=setX;
py=setY;
adi=document.getElementById('image');
adi.parentNode.appendChild(document.createElement('div')).setAttribute("id",'cadre');
cd=document.getElementById('cadre');
cd.style.position='absolute';
cd.style.top=setY-adi.parentNode.offsetTop+"px";
cd.style.left=setX-adi.parentNode.offsetLeft+"px";
cd.style.minWidth  =5+"px";
cd.style.minHeight =5+"px";
cd.style.backgroundColor='black';
if(document.all && !window.opera){ 
cd.style.filter = 'alpha(opacity=25)';
} 
else{ 
cd.style.opacity = 0.3;
}
cz=0
cd.setAttribute("onmouseup","tour=2");
}
if(tour==2){
document.onmousedown=enableselecte;
cz=5;
bour=(adi.offsetLeft-cd.offsetLeft)/adi.offsetWidth;
boul=(adi.offsetTop-cd.offsetTop)/adi.offsetHeight;
adi.style.height=adi.offsetHeight*(adi.parentNode.offsetHeight/cd.offsetHeight)+'px';
adi.style.width=adi.offsetHeight*oper+'px';
adi.style.left=bour*adi.offsetWidth+'px';
adi.style.top=boul*adi.offsetHeight+'px';
cd.parentNode.removeChild(cd);
return false;
}
cd.style.height = (cd.offsetHeight+(setY-py))+"px";
cd.style.width = (cd.offsetWidth)+(setX-px)+"px";
document.onmousedown=disableselecte;
px=setX;
py=setY;
setTimeout(cadrezoom,15);
}
 
function dirizoom(e){// zoom avec molette
var delta = 0;
adi.style.cursor='s-resize';
if (!e) e = window.event;
if (e.wheelDelta) {
delta = e.wheelDelta/120; 
} else if (e.detail) {
delta = -e.detail/3;
}
if(delta<0){
val=-0.15;
}
else{
val=0.15;
}
adi=document.getElementById('image');
var dirle=(adi.offsetWidth/2)-(setX-(adi.parentNode.offsetLeft+adi.offsetLeft));
var dirto=(adi.offsetHeight/2)-(setY-(adi.parentNode.offsetTop+adi.offsetTop));
var lf=adi.offsetWidth;
var rf=adi.offsetHeight;
adi.style.width=lf+(lf*val)+'px';
adi.style.height=rf+(rf*val)+'px';
adi.style.left=adi.offsetLeft-((adi.offsetWidth-lf)/2)+(dirle*val)+'px';
adi.style.top=adi.offsetTop-((adi.offsetHeight-rf)/2)+(dirto*val)+'px';
}
 
function sp(){
if(tour==2){
document.onmousedown=enableselecte;
tour=3;  //version avec association zoom pan. après le zomm on peut toujours faire un pan avec tour=3
document.getElementById('image').style.cursor='auto';
return false;
}
if((tour==3)){//&&(activatePan==true)
px=setX;
py=setY;
tour=0;
adi=document.getElementById('image');
}
adi.style.left=(adi.offsetLeft+setX-px)+'px';
adi.style.top=(adi.offsetTop+setY-py)+'px';
document.onmousedown=disableselecte;
px=setX;
py=setY;
setTimeout(sp,10);
}
 
function dispatche(evt){
 
var evt = evt || window.event;
adi=document.getElementById('image');
if(evt.button == 0 || evt.button == 1){
 
 if(activatePan==true)
 {	 
	 adi.style.cursor='move';
       sp();
 }      
}
if(evt.button == 2){
cz=5
cadrezoom();
}
}
 
function selecte(ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}
 
 
function initForZoom(){
var dic=document.getElementById('imConteneur')
var adi=document.getElementById('image')
if(navigator.appName.substring(0,5)=="Micro"){
adi.attachEvent('onmousedown',function(){dispatche(event)});
adi.attachEvent('onmousewheel',dirizoom);
//adi.attachEvent('onmousemove',dirizoom);
adi.attachEvent('onmousewheel', selecte)
dic.attachEvent('oncontextmenu',function(){return false})
}
else{
if (navigator.userAgent.indexOf("Firefox") != -1){
adi.addEventListener('DOMMouseScroll', dirizoom, false);
adi.addEventListener("DOMMouseScroll", selecte, false)
}
else{
adi.addEventListener('mousewheel', dirizoom, false);
adi.addEventListener("mousewheel", selecte, false)
}
adi.setAttribute("onmousedown", "dispatche(event)", false)
dic.addEventListener("contextmenu", selecte, false)
}
}
appel
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<div id='imConteneur'  onmouseover="tour=3"  onmouseout="tour=2"onmouseup="tour=2" > <!-- text-align:center centre le contenu du div-->   
 
           <img style="z-index:1; position:relative; "  src='dicom.php?quality=100' id='image'  ><!--position:relative; permet de dragguer-->
 
 </div>
que dois-je donc modifier pour ne plus le faire ave la molette mais le cursor. merci