Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Déplacement d'un image dans un DIV

Déplacement d'un image dans un DIV

6 réponses
Avatar
Aloatec
Bonjour

J'ai une image placé dans un div comme ceci :

<div name="cadre" id="cadre" style="width:818px;height:618px;overflow:auto">
<img src="petiteImage.jpg" name="defilement" id="defilement"
onmousedown="ZoomImage(this,'grandeImage.jpg',event);">
</div>

Lorsque je clique sur l'image, celle-ci appelle une fonction qui affiche une
autre image (plus grande) et la positionne selon la position du clique
souris dans l'image d'origine.

function ZoomImage(objImg,imgName,Event){
if(Event==null)
Event=event;
if (Event.offsetX) x=Event.offsetX; else x=Event.layerX;
if (Event.offsetY) y=Event.offsetY; else y=Event.layerY;

objImg.src=imgName;

alert (document.getElementById("cadre").scrollTop+" ;
"+document.getElementById("cadre").scrollLeft);

document.getElementById("cadre").scrollLeft=x;
document.getElementById("cadre").scrollTop=y;
}

Lorsque je laisse la fonction tel que ci-dessus, cela fonctionne bien. Par
contre, si je retire la fonction alert(...), mon image n'est pas
repositionné!

Pourquoi ?

Comment faire pour résoudre ce problème ?

D'avance merci

Thierry
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Le Fou
Aloatec a écrit
(...)
alert (document.getElementById("cadre").scrollTop+" ;
"+document.getElementById("cadre").scrollLeft);

document.getElementById("cadre").scrollLeft=x;
document.getElementById("cadre").scrollTop=y;
}

Lorsque je laisse la fonction tel que ci-dessus, cela fonctionne bien.


Ca m'étonnerait ;-)
Y'a un problème avec ton alert() :
Les guillemets autour de "cadre".
Eh oui, si tu ouvres des guillemets ce qui suit est donc une chaine de
caractères...
Va donc voir les messages que te donne ta console JavaScript lorsque tu
lances le script, ça peut aider ;-)

--
A'tchao

Le Fou
http://perso.club-internet.fr/ehiller/
http://club.exocet.free.fr/
http://www.ffessm-cd84.com/

Avatar
YD

Lorsque je laisse la fonction tel que ci-dessus, cela fonctionne bien. Par
contre, si je retire la fonction alert(...), mon image n'est pas
repositionné!

Pourquoi ?


Quand tu as la boîte d'alert, ton image n'a pas le temps d'être chargée que tu
demandes de la changer de place... Il faut attendre le chargement complet avant
de descendre ;-)

Je te propose cette modif de ta fonction (avec un p'tit coup de pouce pour la
suite) :

function ZoomImage(objImg,imgName,Event){
if(Event==null)
Event=event;
if (Event.offsetX) x=Event.offsetX; else x=Event.layerX;
if (Event.offsetY) y=Event.offsetY; else y=Event.layerY;

var h=objImg.height;

objImg.onload=function(){
ratio=objImg.height/h;
document.getElementById("cadre").scrollLeft=Math.max(ratio*x-409,0);
document.getElementById("cadre").scrollTop=Math.max(ratio*y-309,0);
}
objImg.src=imgName;
}

--
Y.D.

Avatar
Aloatec
Merci pour ton aide, cela fonctionne très bien.
Je me doutais bien que c'était un problème de temps de chargement, mais je
ne savais pas comment faire pour attendre le chargement complet.

Thierry

"YD" a écrit dans le message news:
41992250$0$13734$

Lorsque je laisse la fonction tel que ci-dessus, cela fonctionne bien.
Par


contre, si je retire la fonction alert(...), mon image n'est pas
repositionné!

Pourquoi ?


Quand tu as la boîte d'alert, ton image n'a pas le temps d'être chargée
que tu

demandes de la changer de place... Il faut attendre le chargement complet
avant

de descendre ;-)

Je te propose cette modif de ta fonction (avec un p'tit coup de pouce pour
la

suite) :

function ZoomImage(objImg,imgName,Event){
if(Event==null)
Event=event;
if (Event.offsetX) x=Event.offsetX; else x=Event.layerX;
if (Event.offsetY) y=Event.offsetY; else y=Event.layerY;

var h=objImg.height;

objImg.onload=function(){
ratio=objImg.height/h;
document.getElementById("cadre").scrollLeft=Math.max(ratio*x-409,0);
document.getElementById("cadre").scrollTop=Math.max(ratio*y-309,0);
}
objImg.src=imgName;
}

--
Y.D.



Avatar
Aloatec
Je suis désolé, mais sous firefox 1.0 ou sous mozilla 1.7.3, la console
javascript reste vide.

Thierry

"Le Fou" a écrit dans le message news:
41990a45$0$15752$
Aloatec a écrit
(...)
alert (document.getElementById("cadre").scrollTop+" ;
"+document.getElementById("cadre").scrollLeft);

document.getElementById("cadre").scrollLeft=x;
document.getElementById("cadre").scrollTop=y;
}

Lorsque je laisse la fonction tel que ci-dessus, cela fonctionne bien.


Ca m'étonnerait ;-)
Y'a un problème avec ton alert() :
Les guillemets autour de "cadre".
Eh oui, si tu ouvres des guillemets ce qui suit est donc une chaine de
caractères...
Va donc voir les messages que te donne ta console JavaScript lorsque tu
lances le script, ça peut aider ;-)

--
A'tchao

Le Fou
http://perso.club-internet.fr/ehiller/
http://club.exocet.free.fr/
http://www.ffessm-cd84.com/






Avatar
ASM

Je suis désolé, mais sous firefox 1.0 ou sous mozilla 1.7.3, la console
javascript reste vide.


c'est donc qu'il n'y a pas d'erreur de code JS alors.
ça ne veut pas dire pour autant que le JS pondu est capable
de faire qque chose ...


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
Le Fou
Aloatec a écrit
Je suis désolé, mais sous firefox 1.0 ou sous mozilla 1.7.3, la console
javascript reste vide.


Eh bien tant mieux pour toi ;-)
Moi avec Mozilla 1.4 et avec IE 5.0 j'ai des messages d'erreur JavaScript me
disant "Chaine non terminée..." sur ton alert().
Mais je vois que tu as eu une réponse et que tout fonctionne, c'est le
principal ;-)

--
A'tchao

Le Fou
http://perso.club-internet.fr/ehiller/
http://club.exocet.free.fr/
http://www.ffessm-cd84.com/