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 ^^

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

yes !

c'est exactement ce que je recherche !!

je vais voir pour 4 parties merci déja pour votre aide !!

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

la fine équipe

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

**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

**jypees** · 29/08/2007, 12h10

Son script est une autre facon d'utiliser le settimeout, et de faire un fondu d'image ! va sur son site tu veras c'est vraiment sexe

**UmanU** · 29/08/2007, 12h16

c'est vrai que c'est pas mal !!! meme super jolie !

Et pour les proportions ?

**UmanU** · 29/08/2007, 12h33

Ne faudrais t'il pas déja séparer les 2 dimentions ( hauteur et largeur ) ?

J'ai essaié mais cela ne fonctionne pas pour l'instemps.

Ce code est juste en guise de test, et est cencé fonctioner comme l'autre , mais non...

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
function grand(image, x, y)
{
	if(x <= 50 && y <= 50 )
	{
		image.style.position = "relative";
	}
	if(x < 350 && y < 350)
	{
		image.style.width = x + 'px';
		image.style.height = y + 'px';
		setTimeout(function(){grand(image, x+20, y+20)}, 1);
	}
}
function petit(image, x, y)
{
	if(x > 50 && y > 50)
	{
		image.style.width = x + 'px';
		image.style.height = y + 'px';
		setTimeout(function(){petit(image, x-20, y-20)}, 1);
	} 
	else
	{
		image.style.position = "static";
	}
}

**jypees** · 29/08/2007, 12h34

Les proportions? de quoi tu parles?

du code a tober ou bien de celui de defacta ?

**defacta** · 29/08/2007, 12h57

Envoyé par jypees

Les proportions? de quoi tu parles?

du code a tober ou bien de celui de defacta ?

Les proportions ? Tu ne peux pas changer la taille que d'une partie d'une image !

Le mieux a mon avis serait d'assombrier legerement la photo:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
  function setOpacity(id_img, i) {
   if (document.all){
      document.all(id_img).filters.alpha.opacity = i ;
    } else if (!document.all && document.getElementById) {	
      document.getElementById(id_img).style.MozOpacity = i/100 ;
    }
  }
 
 setOpacity("ta_photo",50) ;

Et quand la souris est devant la partie de cette image, ca s'eclairci progressivement...
Un truc un peu comme ca:

Code :

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

1
2
3
4
5
6
7
  function show_currentimg() {
    opacity = opacity + 20 ;
    setOpacity("ta_photo",opacity) ;
    if(opacity!=100) {
      setTimeout("show_currentimg()",20) ;
    }
  }

Voili-Voilou

Vincent.

**UmanU** · 29/08/2007, 13h18

Merci vincent.

Donc si j'ai bien compris ton premier script conserne les 4 parties de la photo et le 2 doit etre remi 4 fois pour chacune des partis de la photo?

Sinon un effet de zoom + ce que tu m'a montré serais super !!

en fait avec mon code je voulais différencier la largeur de la hauteur,
car ma photo est de 428/588 et non de 50/50 donc quand elle s'agrandi elle est déformée.

De plus je voudrais que la parti en haut a droite s'agrandisse ver le haut a droite de meme pour les partis haut-gauche, bas-droite et bas gauche...

Que de probleme...

**defacta** · 29/08/2007, 13h33

Je ne vois vraiment pas comment faire un zoom dynamique en Javascript !

Tu peux nous montrer ce que tu as fait ? Comme ca ca fera une base pour discuter...

Ce que tu peux faire aussi et qui serait plus simple serait de decouper la photo en 4, chaque partie collee les unes aux autres !

Vincent.

Photo dynamique javascript

JavaScript

Discussions similaires

Partager

Partager