zoom sur image a la souris en mettant le curseur de la souris sur l'image en restant appuye sur le bouton droit de la souris et en bouge de haut en bas ou l'inverse on execute un vrais zoom sur l'image;l'image restant centre sur la page le tout cree dynamiquement par javascript et le DOM compatible IE ff Opera safari chrome
Source / Exemple :
var couleur_de_fond="black";
var factalle
var opab=10;
var tour=1;
var dde=document.documentElement;
var imag = new Image();
var cc;
function precharge(ii){
dde.lastChild.appendChild(document.createElement('div')).setAttribute("id",'preco');
document.getElementById('preco').appendChild(document.createElement('img')).setAttribute("id",'preci');
precco=document.getElementById('preco');
precdi=document.getElementById('preci');
precco.style.width = 100+"%";
precco.style.height =dde.scrollHeight+"px";
precdi.src="Animation.gif";
precdi.style.position='absolute';
precdi.style.height=100+"px";
precdi.style.left=(dde.clientWidth-precdi.offsetWidth)/2+"px";
if(navigator.vendor!=null && navigator.vendor.substring(0,3)=="Goo" || navigator.vendor!=null && (navigator.vendor.substring(0,3)=="App")){
precdi.style.top=(dde.clientHeight-precdi.offsetHeight)/2+dde.lastChild.scrollTop+"px";
}
else{
precdi.style.top=(dde.clientHeight-precdi.offsetHeight)/2+dde.scrollTop+"px";
}
imag.src = ii;
cc=ii;
imag.onload=function(){
document.getElementById('preco').parentNode.removeChild(document.getElementById('preco'));
resize()}
}
function quit(){
document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
document.getElementById('divim').parentNode.removeChild(document.getElementById('divim'));
tour=1;
opab=10;
window.clearTimeout(sscrotimer)
}
function sscro(){
if(navigator.vendor!=null && navigator.vendor.substring(0,3)=="Goo" || navigator.vendor!=null && (navigator.vendor.substring(0,3)=="App")){
document.getElementById('divco').style.height =dde.clientHeight+dde.lastChild.scrollTop+"px";
}
else{
document.getElementById('divco').style.height =dde.clientHeight+dde.scrollTop+"px";
}
sscrotimer=setTimeout("sscro()",20);
}
function tarto(s){
if(navigator.appName.substring(0,3)=="Net"){
setY = s.clientY+dde.scrollTop;
}
if(navigator.appName.substring(0,3)!="Net"){
setY=event.y+dde.scrollTop;
return false;
}
}
function disableselect(e){
return false;
}
function enableselecte(e){
return true;
}
function mousezoom(){
if(tour==2){
document.onmousedown=enableselecte;
return false;
}
if(tour==3){
py=setY;
tour=1;
adi=document.getElementById('divim');
oper=adi.offsetWidth/adi.offsetHeight;
}
if(adi.offsetWidth<=(30)){
adi.style.height=50+'px';
adi.style.width=factalle*ydi.offsetHeight+'px';
}
adi.style.width=oper*(adi.offsetHeight-(setY-py)*2)+'px';
adi.style.height=(adi.offsetHeight-(setY-py)*2)+'px';
adi.style.left=((dde.clientWidth-adi.offsetWidth)/2)+'px';
if(navigator.vendor!=null && navigator.vendor.substring(0,3)=="Goo" || navigator.vendor!=null && (navigator.vendor.substring(0,3)=="App")){
adi.style.top=((dde.clientHeight-adi.offsetHeight)/2)+dde.lastChild.scrollTop+"px";
}
else{
adi.style.top=((dde.clientHeight-adi.offsetHeight)/2)+dde.scrollTop+'px';
}
dde.onmousedown=disableselect;
py=setY;
setTimeout("mousezoom()",15);
}
function resize(){
if(tour==1){
dde.lastChild.appendChild(document.createElement('div')).setAttribute("id",'divco');
dde.lastChild.appendChild(document.createElement('img')).setAttribute("id",'divim');
ddco=document.getElementById('divco');
ydi=document.getElementById('divim');
ddco.style.position='absolute';
ddco.style.top=0+"px";
ddco.style.left=0+"px";
ddco.style.backgroundColor=couleur_de_fond;
ddco.style.width = 100+"%";
sscro()
ydi.src=cc;
ydi.style.position='absolute';
ydi.style.cursor='s-resize';
ydi.style.height=100+"px";
factalle=ydi.offsetWidth/ydi.offsetHeight;
tour=0;
}
opab+=6;
if(document.all && !window.opera){
ydi.style.filter = 'alpha(opacity=' + opab + ')';
ddco.style.filter = 'alpha(opacity=' + opab/4 + ')';
}
else{
ydi.style.opacity = opab/100;
ddco.style.opacity = opab/100/4;
}
ydi.style.height=ydi.offsetHeight+20+"px";
ydi.style.width=factalle*(ydi.offsetHeight+20)+"px";
ydi.style.left=(dde.clientWidth-ydi.offsetWidth)/2+"px";
if(navigator.vendor!=null && navigator.vendor.substring(0,3)=="Goo" || navigator.vendor!=null && (navigator.vendor.substring(0,3)=="App")){
ydi.style.top=(dde.clientHeight-ydi.offsetHeight)/2+dde.lastChild.scrollTop+"px";
}
else{
ydi.style.top=(dde.clientHeight-ydi.offsetHeight)/2+dde.scrollTop+"px";
}
if(ydi.offsetHeight>=dde.clientHeight-20||ydi.offsetWidth>=dde.clientWidth-20){
tour=2;
ddco.appendChild(document.createElement('div')).setAttribute("id",'quit');
ddq=document.getElementById('quit');
ddq.appendChild(document.createTextNode("Q"));
ddq.style.fontSize=80+"px";
ddq.style.color="green";
ddq.style.cursor='pointer';
ddq.style.position='absolute';
ddq.style.top=5+'%';
ddq.style.left=5+'%';
if(navigator.appName.substring(0,5)=="Micro"){
ydi.attachEvent('onmousedown', function(){tour=3;mousezoom()});
ydi.attachEvent("onmousemove",tarto);
ydi.attachEvent('onmouseup', function(){tour=2});
ddq.attachEvent("onmouseover",function(){ddq.style.color='red'});
ddq.attachEvent("onmouseout",function(){ddq.style.color='green'});
ddq.attachEvent("onclick",quit);
}
else{
ydi.setAttribute("onmousedown","tour=3;mousezoom()");
ydi.setAttribute("onmousemove","tarto(event)");
ydi.setAttribute("onmouseup","tour=2");
ddq.setAttribute("onmouseover","ddq.style.color='red'");
ddq.setAttribute("onmouseout","ddq.style.color='green'");
ddq.setAttribute("onclick","quit()");
}
return false;
}
setTimeout("resize()",15);
}
Conclusion :
du pure dhtml
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.