Zoom sur image a la souris

Soyez le premier à donner votre avis sur cette source.

Vue 24 934 fois - Téléchargée 2 036 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
Messages postés
3
Date d'inscription
mercredi 19 avril 2006
Statut
Membre
Dernière intervention
21 août 2009

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 !
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
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
Messages postés
3
Date d'inscription
mercredi 19 avril 2006
Statut
Membre
Dernière intervention
21 août 2009

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 !
Messages postés
1
Date d'inscription
samedi 18 juin 2005
Statut
Membre
Dernière intervention
16 avril 2009

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
Messages postés
2
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
2 avril 2009

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.