ZOOM SUR IMAGE A LA SOURIS

Commentaire de petifa le 12/10/2008 22:43:06

slt kazma,
j'ai pas pu tester ton code quand je télécharge le zip c'est un format zipnix et si je le renomme en zip le fichier devient corrompu....

Commentaire de kazma le 13/10/2008 17:56:12

j'ai recree un zip au cas ou il a ete mal fait la premiere fois(winace) modification de souris
sinon chez mois sa marche avec IE 7 ???

Commentaire de djmmix le 17/10/2008 11:59:35

marche toujours pas sous IE7 sous chrome et ff3 pas de soucis je c'est pas pourquoi il dit toujours la même erreur :demande d'accès à la méthode ou à la propriété inattendue: ligne 94

Commentaire de kazma le 18/10/2008 11:21:09

petit erreur
c'est pa egale mai different qu'il faut mettre

if(navigator.appName.substring(0,3)!="Mic"){
dde.onmousedown=disableselect;
}

Commentaire de lassad_haddaji le 20/10/2008 15:02:18

avec FF cé bon mais reste probleme avec IE7 apart ca cé bien la source

Commentaire de kazma le 20/10/2008 19:57:48

bonjour
quand l'image est en mode paysage (plus large que haute)

si tu met le curseur de la souris sur l'image que tu  appuye sur le bouton droit de la souris et que tu bouge de haut en bas ou l'inverse tu execute un zoom sur l'image en diminuant la taille de l'image tu aura acces au Q

avec FF cé bon mais reste probleme avec IE7

j' ai du mal a comprendre le probleme car chez moi sa marche avec IE 6 et 7

Heu, juste pour dire mais pourquoi ne pas faire ça en plus soigné en flash???

plus soigne a bon ???

Commentaire de kazma le 24/10/2008 19:33:32

retelecharge le script mais normalement sa devrait marche

Commentaire de jtoto le 03/11/2008 20:01:44

avec tes images ta source marche très bien mais si je met des photos perso à la place des tiennes que ce soit en vinette dans le repertoire thumb en t_xxx.jpg de 100px120px et en xxx.jpg dans le repertoire principal ainsi qu'après avoir modifié le fichier diap html.htm avec les noms des nouvelles photos t_xxx.jpg et xxx.jpg je n'obtiens pas l'image de la vignette et encore moins celle de laphoto!!! peux-tu m'indiquer la methode pour pouvoir faire fonctionner ta source sur IE7 et mes photosz perso!!!merci pour ton aide

Commentaire de ecirtap12 le 17/11/2008 14:39:10

Sympa ce script.
Cependant, ce que je trouve dommage, c'est que l'image zoomée reste centrée sur son centre.
Comment faire pour qu'elle reste centrée sur le coin haut gauche car ainsi, on pourrait naviguer avec les ascenseurs je pense pour voir les détails de toute l'image?
Ce script me conviendrait mais comme je veux zoomer sur de gros jpg (10Mo) avec beaucoup de détails, je ne peux pas visualiser toute mon image ou alors, il y a un truc que je na'ai pas compris.
Comme je suis une bille en js, un petit coup de pouce serait sympa.

Commentaire de kazma le 17/11/2008 21:38:57

la modif

//-------------------------------------------------------------
//  Nom Document : mousezoom
//  Auteur       : kazma
//  Objet        : zoom a la sourie   http://www.javascriptfr.com/
//  Création     : 12.10.2008
//-------------------------------------------------------------
//  Mise à Jour  : 19.10.2008
//  Objet        : neant
//-------------------------------------------------------------
//-(*)------------------
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(document.getElementById('divco')!=null){
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";
document.getElementById('divco').style.width =dde.clientWidth+dde.scrollLeft+"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';

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+"%";
if(navigator.vendor!=null && navigator.vendor.substring(0,3)=="Goo" || navigator.vendor!=null && (navigator.vendor.substring(0,3)=="App")){
ddco.style.height=dde.lastChild.scrollHeight+"px";
}
else{
ddco.style.height=dde.scrollHeight+"px";
}
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=0+"px";
ydi.style.top=0+"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=80+'%';
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()");
}
sscro()
return false;
}
setTimeout("resize()",15);
}

Commentaire de ecirtap12 le 18/11/2008 14:13:28

Merci beaucoup KAZMA pour ton nouveau script.
C'est parfait pour ce dont j'avais besoin.
Effectivement, maintenant, je peu naviguer sur toute l'mage lorsqu'elle est zoomée et donc profiter des détails.
Bravo pour la rapidité de ta réponse et pour la qualité du résultat

Commentaire de ealedor le 25/11/2008 16:47:17

je viens là de lancer les ci haut le resutat n'est pas fameux, priere de m'en dire un plus sur le zoom des image sur un page HTML