ZOOM SUR IMAGE A LA SOURIS

Signaler
Messages postés
215
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
10 mars 2014
-
Messages postés
3
Date d'inscription
mercredi 19 avril 2006
Statut
Membre
Dernière intervention
21 août 2009
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/48195-zoom-sur-image-a-la-souris

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
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
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.
Messages postés
29
Date d'inscription
lundi 2 janvier 2006
Statut
Membre
Dernière intervention
23 février 2009

merci KAZMA treès bonne source c'est beaucoup plus convivial maintenant. encore bravo
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
vue que c'est une demande générale j'ai supprimer le Q il suffit maintenant de cliquer sur le voile pour quitter
Messages postés
29
Date d'inscription
lundi 2 janvier 2006
Statut
Membre
Dernière intervention
23 février 2009

oui la source est très bien mais je suis d'accord avec MADO9 il serai beaucoup plus convivial de se passer du Q car pour passer à une autre on est obligé de diminuer l'image zoomée avec la roulette de la souris pour avoir acces au Q et passer à une autre photo ce qui n'est pas très convivial ni pratique
Messages postés
2
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
2 avril 2009

salut à tous, j'aime bcp l'effet de ce code, mais je rencontre le même problème que JTOTO, c'est à dire que le Q est caché par l'image et j'aimerai qu'il soit visible de manière à ce que la navigation soit plus intuitive. Je reprend le code après une longue pause et c'est un réel plaisir même si je bloque là dessus. Si qqn pouvait m'aider à arranger ce problème j'apprécierai bcp.
Messages postés
2
Date d'inscription
mercredi 4 février 2009
Statut
Membre
Dernière intervention
22 février 2009

Merci, c'est super, la seul chose serait de pouvoir ce passer du Q
-fermer l'image en cliquant dessus
-qu'une nouvelle image s'affiche à la place si on clique dessus
Je n'ai pas réussi à modifier dans ce sens.
Messages postés
22
Date d'inscription
mardi 15 mars 2011
Statut
Membre
Dernière intervention
14 janvier 2012

Le script est modifiable à souhait.
Bon job, mais je suis sur qu'en AS3 on arriverait à faire plus portable et ajouter de meilleurs effets.
Nico, qui salue le script publié malgré tout.
Messages postés
2
Date d'inscription
mardi 25 novembre 2008
Statut
Membre
Dernière intervention
7 novembre 2010

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
Messages postés
29
Date d'inscription
lundi 2 janvier 2006
Statut
Membre
Dernière intervention
23 février 2009

bonjour je trouve cette source très belle mais étant débutant en javascript je voudrais savoir comment faire pour ne pas être obliger de cliquer sur Q pour visualiser une autre image mais simplement réduire la photo en cours de visualiastion et cliquer sur une photo d'arrière plan pour agrandir celle-ci. Merci si quelqu'un à une idée
Messages postés
12
Date d'inscription
vendredi 11 janvier 2008
Statut
Membre
Dernière intervention
13 décembre 2010

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
Messages postés
12
Date d'inscription
vendredi 11 janvier 2008
Statut
Membre
Dernière intervention
13 décembre 2010

Bravo pour la réactivité Kazma.
Je vais tester cette modif de ce pas. @+
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
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);
}
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
la modification du script est tout a fait possible
Messages postés
12
Date d'inscription
vendredi 11 janvier 2008
Statut
Membre
Dernière intervention
13 décembre 2010

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.
Messages postés
22
Date d'inscription
mardi 15 mars 2011
Statut
Membre
Dernière intervention
14 janvier 2012

Peut-être parce que tu as enregistré tes images en jpg progressif???
Messages postés
29
Date d'inscription
lundi 2 janvier 2006
Statut
Membre
Dernière intervention
23 février 2009

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
Messages postés
22
Date d'inscription
mardi 15 mars 2011
Statut
Membre
Dernière intervention
14 janvier 2012

Désolé mais oui, en utilisant AS3 je pense que d'une part tu n'auras pas de problème de compatibilité entre navigateurs et les effets visuels,comme la portabilité du code, pourraient être plus intéressants.

Ne prends pas ça comme une critique négative mais comme une piste pour obtenir des effets plus percutants.

Bien à toi et bonne continuation.
Nicolas
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
retelecharge le script mais normalement sa devrait marche
Messages postés
16
Date d'inscription
vendredi 27 avril 2007
Statut
Membre
Dernière intervention
16 décembre 2008

pas mal comme source, mais en cas de changement d'image il me reaffiche la meme que precedement (ie7). Puis, si changement d'image : une image de retard !
Est-ce normal ou je suisle seul ?
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
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 ???
Messages postés
22
Date d'inscription
mardi 15 mars 2011
Statut
Membre
Dernière intervention
14 janvier 2012

Heu, juste pour dire mais pourquoi ne pas faire ça en plus soigné en flash???
Messages postés
142
Date d'inscription
mardi 24 avril 2007
Statut
Membre
Dernière intervention
6 avril 2012

avec FF cé bon mais reste probleme avec IE7 apart ca cé bien la source
Messages postés
29
Date d'inscription
lundi 2 janvier 2006
Statut
Membre
Dernière intervention
23 février 2009

très bonne source maais j'ai un problème quand l'image est en mode paysage (plus large que haute) je n'ai pas acces au "Q" qui se trouve caché par l'image zoomée. il serait préférable de pouvoir revenir au diaporama si on clique sur l'image!!! à part ce problème la source est très bonne merci
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
petit erreur
c'est pa egale mai different qu'il faut mettre

if(navigator.appName.substring(0,3)!="Mic"){
dde.onmousedown=disableselect;
}
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
j'ai du mal a comprendre vu que pour moi ca marche mais essay quand meme ca
a la ligne incremine si je ne me trompe c'est celle ci

dde.onmousedown=disableselect;

remplace par

if(navigator.appName.substring(0,3)=="Mic"){
dde.onmousedown=disableselect;
}
Messages postés
152
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
29 avril 2009

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
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
petite modification du script j'ai ajouter un prechargement d'image. pour tester le tout http://site.voila.fr/scriptevol/dia/dial.html
afin de mieux se rendre compte du fonctionnement du prechargement j'ai volontairement insere une image de 2 MO la derniere image en bas
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
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 ???
Messages postés
152
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
29 avril 2009

tester sous ie7 et bug qui dit une erreur en demande d'accès à la méthode ou à la propriété inattendue.

ff3 sa marche.

corrige la faute à souris ;)
Messages postés
215
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
10 mars 2014

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....