Zoom sur image a la souris

Soyez le premier à donner votre avis sur cette source.

Vue 25 181 fois - Téléchargée 2 047 fois

Description

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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
aqwzsxk Messages postés 3 Date d'inscription mercredi 19 avril 2006 Statut Membre Dernière intervention 21 août 2009
21 août 2009 à 23:17
Tant pis. Merci pour la réponse très rapide, et le code très bien fait. Je vais donc m'y prendre autrement, et ne plus utiliser de FRAME...

Merci !
@karamel Messages postés 1811 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 4 septembre 2022 145
21 août 2009 à 22:58
c'est pas possible car justement tu te sert de frames et que on ne peut pas mettre une page entière au dessus de frame
aqwzsxk Messages postés 3 Date d'inscription mercredi 19 avril 2006 Statut Membre Dernière intervention 21 août 2009
19 août 2009 à 13:58
Ce code a un rendu impeccable ! Merci pour cette source KAZMA.

J'ai cependant une question (à KAZMA s'il a encore du temps ?) :

J'utilise des FRAME sur mon site. Les images sont affichées en petites dimensions dans le frame principal, et je voudrais qu'elles s'affichent en pleine page grâce à ce script. En pratique, elles s'affichent en prenant le plus de place possible dans le frame où elles sont présentes, malheureusement pas plus.

Comment faut-il modifier le script pour que l'affichage se fasse en plein écran ?

D'avance merci !
iceman92_4 Messages postés 1 Date d'inscription samedi 18 juin 2005 Statut Membre Dernière intervention 16 avril 2009
16 avril 2009 à 22:49
Bonjour, tout d'abord félicitations pour ce magnifique script qui correspond tout à fait à ce que je cherche (comme d'autres scripts tout aussi bien fait. J'ai juste deux questions :
1 - peux t'on limiter l'affichage de la photo à x% en lieu et place du plein écran.
2 - sur mon site, j'ai un menu et ce dernier est en avant par rapport à l'image ce qui donne un rendu pas terrible.
Je pense que les deux modifs doivent être faites dans le fichier mousezoom.js mais je n'ai pas trouvé où, malgré plusieurs essais infructueux.
C'est pourquoi je sollicite l'aide d'un spécialiste.

Encore bravo.
Cordialement.
Mikaël
agentduc Messages postés 2 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 2 avril 2009
2 avril 2009 à 01:46
je confirme, merci bcp, très bon travail.
Afficher les 34 commentaires

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.