javascript dimension image

[djp1988]

Bonjour, comment on peut definir un variable qui en faite prendrais la valeur de départ des dimensions d'une image au chargement de la page et qui ensuite se rappell de ces valeurs alors que un autre script anime les dimensions de l'image?

Je travail sur un script pour faire zoom sur les images, et le probleme est que je calcule la taille désiré pour le zoom / dézoom à partir des dimensions de l'image, seulement que si quelqu'un passe la souris dessus et s'enleve ou enclanche le dézoom desuite apres avoir enclancher le zoom, les dimensions desiré de départ (etit dimensions) et fin (grand dimensions) sont alors modifiés, testé ici:

http://www.herpfrance.com/Web/untitled.html

CODE

window.onload = startfunc;

function startfunc(){

divi = document.getElementById("atlas");

images = divi.getElementsByTagName("img");

for(i=0;i<images.length;i++){

images.onmouseover = function(){

ratioW = this.width * 0.1515;

ratioH = this.height * 0.1515;

zoomin(this);

}

images.onmouseout = function(){

zoomout(this);

}

}

}

function zoomin(id) {

widthactuel = id.width;

desiredwidth = (widthactuel * 3);

heightactuel = id.height;

desiredheight = (heightactuel * 3);

if(widthactuel < desiredwidth){

i = widthactuel;

p = heightactuel;

id.style.zIndex = 1;

doStep1();

}

function doStep1() {

if(i < desiredwidth) {

id.style.width = (i + 'px');

id.style.height = (p + 'px');

i = i+ ratioW;

p = p+ ratioH;

setTimeout(doStep1,1);

}

}

}

function zoomout(id) {

widthactuel = id.width;

desiredwidth = (widthactuel / 3);

heightactuel = id.height;

desiredheight = (heightactuel / 3);

if(widthactuel > desiredwidth){

i = widthactuel;

p = heightactuel;

id.style.zIndex = 0;

doStep2();

}

function doStep2() {

if(i > desiredwidth) {

id.style.width = (i + 'px');

id.style.height = (p + 'px');

i = i-ratioW;

p = p-ratioH;

setTimeout(doStep2,1);

}

}

}

[Martoclou]

Salut,

As-tu essayé en créant un objet au départ ?

var o=new Object;

Tu peux ensuite l'utiliser dans tes fonctions pour stocker des variables :

function x(){

o.hauteur=...

}

[djp1988]

CODE

function startfunc(){
divi = document.getElementById("atlas");
images = divi.getElementsByTagName("img");
for(i=0;i<images.length;i++){
smallwidth = images.width;
smallheight = images.height;
largewidth = smallwidth * 3;
largeheight = smallheight * 3;
ratioW = smallwidth * 0.1515;
ratioH = smallheight * 0.1515;

images.onmouseover = function(){
zoomin(this);
}
images.onmouseout = function(){
zoomout(this);
}

}
}

function zoomin(id) {
if(smallwidth < largewidth){
i = smallwidth;
p = smallheight;
doStep1();
}

function doStep1() {
if(i < largewidth) {
id.style.width = (i + 'px');
id.style.height = (p + 'px');
i = i+ ratioW;
p = p+ ratioH;
setTimeout(doStep1,1);
}
if(!(i<largewidth)){
id.style.width = largewidth + 'px';
id.style.height = largeheight + 'px';
}
}
}

function zoomout(id) {
if(largewidth > smallwidth){
i = largewidth;
p = largeheight;
doStep2();
}

function doStep2() {
if(i > smallwidth) {
id.style.width = (i + 'px');
id.style.height = (p + 'px');
i = i-ratioW;
p = p-ratioH;
setTimeout(doStep2,1);
}
if(!(i>smallwidth)){
id.style.width = smallwidth + 'px';
id.style.height = smallheight + 'px';
}
}
}

J'ai reussi à m'approcher du but, amis je ne comprends pas le comportement que l'animation prend si on va au dessus, à un autre image, et on revien etc.... au bout d'un moment, j'ai l'impression que ca pete un plomb et je ne comprends pas le comportement de ce qui se passe, ca saute, et parfois quand on va sur une des 3 images les 3 se gonflent, bref, jouez avec mon fichier et expliquez moi svp:

http://www.herpfrance.com/Web/untitled2.html

[djp1988]

Si j'ai une fonction setTimeout qui s'active lors d'un onmouseover, et un different setTimeout qui s'active lors d'un onmouseout sur un meme objet, si je fais un onmouseover et que en meme temps que le setTimeout s'est mis en route sans qu'il ait le temps de mettre en route sa fonction je fais un onmouseout qui déclanche l'autre setTimeout, les 2 setTimeout vont ils continuer leur execution?

problem, voir, et faites un onmouseover et onmouseout rapidement, et observer l'horreur qui suit, sautement, c'est les 2 setTimeout qui se font la guerre ?: http://www.herpfrance.com/Web/untitled2.html

[Bovino]

Tu peux utiliser un flag en variable globale qui te dis si oui ou non le settimeout précédent est terminé.

Sinon, donne un nom à ton settimeout

var timer = setTimeout(...);

tu peux ensuite appeler un clearTimeout sur cette variable.