ZOOM SUR IMAGE A LA SOURIS
cs_petifa
Messages postés
215
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
10 mars 2014
-
12 oct. 2008 à 22:43
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
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
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
https://codes-sources.commentcamarche.net/source/48195-zoom-sur-image-a-la-souris
21 août 2009 à 23:17
Merci !
21 août 2009 à 22:58
19 août 2009 à 13:58
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 !
16 avril 2009 à 22:49
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
2 avril 2009 à 01:46
1 avril 2009 à 17:54
1 avril 2009 à 14:40
31 mars 2009 à 19:57
31 mars 2009 à 19:43
22 févr. 2009 à 18:18
-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.
26 nov. 2008 à 02:20
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.
25 nov. 2008 à 16:47
18 nov. 2008 à 16:08
18 nov. 2008 à 14:13
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
18 nov. 2008 à 11:00
Je vais tester cette modif de ce pas. @+
17 nov. 2008 à 21:38
//-------------------------------------------------------------
// 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);
}
17 nov. 2008 à 18:15
17 nov. 2008 à 14:39
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.
4 nov. 2008 à 00:26
3 nov. 2008 à 20:01
3 nov. 2008 à 16:47
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
24 oct. 2008 à 19:33
24 oct. 2008 à 17:09
Est-ce normal ou je suisle seul ?
20 oct. 2008 à 19:57
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 ???
20 oct. 2008 à 18:00
20 oct. 2008 à 15:02
20 oct. 2008 à 09:05
18 oct. 2008 à 11:21
c'est pa egale mai different qu'il faut mettre
if(navigator.appName.substring(0,3)!="Mic"){
dde.onmousedown=disableselect;
}
17 oct. 2008 à 21:00
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;
}
17 oct. 2008 à 11:59
16 oct. 2008 à 18:17
afin de mieux se rendre compte du fonctionnement du prechargement j'ai volontairement insere une image de 2 MO la derniere image en bas
13 oct. 2008 à 17:56
sinon chez mois sa marche avec IE 7 ???
12 oct. 2008 à 23:31
ff3 sa marche.
corrige la faute à souris ;)
12 oct. 2008 à 22:43
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....