Photo dynamique javascript

**UmanU** · 29/08/2007, 10h39

Bonjour tout le monde

J'ai un petit soucis avec une photo que je souhaiterais rendre dynamique.

Je m'explique, cette photo est divisée en 4 parties et je voudrais que lors du passage de la souris sur l'une des 4 partis , celle ci s'agrandisse ( pas d'un coup , mais progressivement) + un texte qui se voit aussi agrandire, et que lors du clique , sa redirige vers une autre page en fonction de la partie de la photo choisie.

Je pense que cela est possible avec javascript avec des mouseOver mouseOut et onClick mais je ne sais pas vraiment comment le mettre en forme ...

Merci pour votre précieuse aide !!

**jypees** · 29/08/2007, 10h46

oulaaaaaaaa je dirais pas que je ne sais pas le faire mais c'est complexe !!!

Il faut d'abord que tu maitrises parfaitement les coordonées javascript car il va falloirt que tu bosses en absolus puis il faudrait que tu maitrises bien settimeout afin de gerer des boucles agrandissant les parties désirés.
Tu débutes en javascript? car si c'est le cas arf ca va pas etre chaud

**UmanU** · 29/08/2007, 11h06

Merci pour ta réponce,

En ce qui concerne les coordonées sa peut allé, par contre settimeout connais pas.

En javascript je ne débute pas mais je n'ai jamais fait de chose comme sa.

Mais j'ai du temps et suis motivé.

Donc ce qu'il faudrais dire c'est " si la souris est située entre les coordonées x1 y1 x2 y2 fait un zoom, si elle est ..., sinon fait rien...." c'est a peu près comme sa ?

**jypees** · 29/08/2007, 11h13

Si tu debutes pas je veux bien t'aider

Oui c'est ca ! avec les attributs offset de l'image et celle de ta sourie tu en déduis des rapports

puis apres c'est une histoire de calcul. settimeout va te permettre de faire des boucles automatiques (pratique pour animer une image en changeant ces attributs css etc).

Apres un conseil etudis bien comment tu t'y prends pour resté toujours propre sinon ca va vite devenir le foutoir

**Tober** · 29/08/2007, 11h14

je me suis amusé a faire ça :

Code XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<script language="JavaScript">
<!--
function grand(image, i){
	if(i <= 50){
		image.style.position = "relative";
	}
	if(i < 350){
		image.style.width = i;
		image.style.height = i;
		setTimeout(function(){grand(image, i+20)}, 1);
	}
}
function petit(image, i){
	if(i > 50){
		image.style.width = i;
		image.style.height = i;
		setTimeout(function(){petit(image, i-20)}, 1);
	} 
	else{
		image.style.position = "static";
	}
}
-->
</script>
</head>
<body>
<img src="./terre.jpg" style="width:50px;height:50px;" onmouseover="grand(this, this.offsetWidth);" onmouseout="petit(this, this.offsetWidth);" />
</body>
</html>

**jypees** · 29/08/2007, 11h20

Excellent ca devrait l'aidé ! mais ca ne fonctionne helas pas sur firefox :'( de plus il veux 4 parties ce qui complique le code ! mais tres bon début ! geniale j'ai pas a le faire

merci tober

**jypees** · 29/08/2007, 11h21

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<script language="JavaScript">
<!--
function grand(image, i){
	if(i <= 50){
		image.style.position = "relative";
	}
	if(i < 350){
		image.style.width = i + 'px';
		image.style.height = i + 'px';
		setTimeout(function(){grand(image, i+20)}, 1);
	}
}
function petit(image, i){
	if(i > 50){
		image.style.width = i + 'px';
		image.style.height = i + 'px';
		setTimeout(function(){petit(image, i-20)}, 1);
	} 
	else{
		image.style.position = "static";
	}
}
-->
</script>
</head>
<body>
<img src="./terre.jpg" style="width:50px;height:50px;" onmouseover="grand(this, this.offsetWidth);" onmouseout="petit(this, this.offsetWidth);" />
</body>
</html>

Voila je les corrigé ^^ il fallait ajouté + 'px'

Sinon a la vu de ce que tu souhaites faire je crois que tu devras couper l'image en 4 avant de pouvoir faire le truc !!! apres tu adaptes le code de tober et c'est finit ^^

**defacta** · 29/08/2007, 11h32

Envoyé par UmanU

Bonjour tout le monde

Je m'explique, cette photo est divisée en 4 parties et je voudrais que lors du passage de la souris sur l'une des 4 partis , celle ci s'agrandisse ( pas d'un coup , mais progressivement)

Progressivement, tu peux faire ca avec settimout, voila un ex. pour afficher progressivement une photo :

http://siova.galleryhp.com/photos/in...rsion=2#seeimg

Voila un exemple de code qui permet d'effacer prog. une photo:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  function hide_currentimg() {
    opacity = opacity - 20 ;
    setOpacity("img_diapo",opacity) ;
    if(opacity!=0) {
      setTimeout("hide_currentimg()",25) ;
    } else {
      document.getElementById('table_diapo').style.height = imgs[num_current].height ;
      document.getElementById('img_diapo').src = imgs[num_current].src ;
      if( (diapo == 1)&&(stop==0)&&(goto_top==1) ) {
        window.location.href='#top_pellicule' ;
      }
      setTimeout("show_currentimg()",600) ;
    }
  }

Ou plus simple pour verifier si la photo suivante a bien ete telecharge:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  function check_nextloaded() {
    if(imgs[num_next].complete) {
      setOpacity("buton_next",100) ;
    } else {
      setTimeout("check_nextloaded()",20) ;
    }
  }

Toutes les 20 ms, on check si la photo est chargee, c'est une fonction recursive...qui s'auto appelle tant que la tof n'est pas chargee !

Si tu as des questions, m'hesite pas

Vincent.

**jypees** · 29/08/2007, 11h39

defacta >> Ca va meme a force devenir le topic de la mort

Avec ca UmanU tu nous fais ta petite source et hop tu postes ca [edit] dasn les contributions sur developpez[/edit]

**UmanU** · 29/08/2007, 11h58

Je ne comprends pas bien ton aide defacta...

je disais progressivement pour sire que sa ne zoom pas d'un coup le script de jypees est parfait !

mais mon images n'a pas une hauteur et une largeur pareil ? a vrai dire le coef est hauteur*0.73 = largeur . j'ai remplacer les px mais sa n'a pas l'air de marche sa ne respecte pas les proportions