Webmaster Hub > javascript dimension image

Version complète: sur le forum Webmaster Hub : javascript dimension image

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > AjaX et JavaScript

djp1988

jeudi 31 juillet 2008 à 14:52

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[i].onmouseover = function(){
				ratioW = this.width * 0.1515;
				ratioH = this.height * 0.1515;
				zoomin(this);
			}
			images[i].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

jeudi 31 juillet 2008 à 15:29

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

samedi 2 août 2008 à 18:11

CODE

	function startfunc(){
		divi = document.getElementById("atlas");
		images = divi.getElementsByTagName("img");
		for(i=0;i<images.length;i++){
			smallwidth = images[i].width;
			smallheight = images[i].height;
			largewidth = smallwidth * 3;
			largeheight = smallheight * 3;
			ratioW = smallwidth * 0.1515;
			ratioH = smallheight * 0.1515;
			
			images[i].onmouseover = function(){
				zoomin(this);
			}
			images[i].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

dimanche 3 août 2008 à 02:54

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

lundi 4 août 2008 à 07:06

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

CODE

var timer = setTimeout(...);

tu peux ensuite appeler un clearTimeout sur cette variable.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.