Photo dynamique javascript

Version imprimable

29/08/2007, 10h39
UmanU

Photo dynamique javascript

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 !!
29/08/2007, 10h46
jypees

oulaaaaaaaa je dirais pas que je ne sais pas le faire mais c'est complexe !!! 8O
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 :mouarf:
29/08/2007, 11h06
UmanU

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 ?
29/08/2007, 11h13
jypees

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 :king:

1 pièce(s) jointe(s)

je me suis amusé a faire ça :

Code:

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>

29/08/2007, 11h20
jypees

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 :king: merci tober :yaisse2:

Code:

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' :yaisse2:

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

29/08/2007, 11h24
UmanU

yes !

c'est exactement ce que je recherche !!

je vais voir pour 4 parties merci déja pour votre aide !!
29/08/2007, 11h26
Tober

la fine équipe :yaisse2:
29/08/2007, 11h27
jypees

:yaisse2: :lahola: :yaisse2:

Citation:

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:

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:

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.

29/08/2007, 11h39
jypees

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

Avec ca UmanU tu nous fais ta petite source et hop tu postes ca [edit] dasn les contributions sur developpez[/edit]
:yaisse3::frenchy::lahola::chin:
29/08/2007, 11h58
UmanU

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
29/08/2007, 12h10
jypees

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 :yaisse2:
29/08/2007, 12h16
UmanU

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

Et pour les proportions ?

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:

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";
	}
}

29/08/2007, 12h34
jypees

Les proportions? de quoi tu parles? :oops: du code a tober ou bien de celui de defacta ? :roll:

Citation:

Envoyé par jypees

Les proportions? de quoi tu parles? :oops: du code a tober ou bien de celui de defacta ? :roll:

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:

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:

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.

29/08/2007, 13h18
UmanU

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...
29/08/2007, 13h33
defacta

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.
29/08/2007, 21h53
UmanU

Oui découper la photo en 4 bien sur je pensais faire sa mais le probleme c'est que cette photo est découpée de deux traits en diagonale...

Et qu'est qui cloche dans mon code ??
30/08/2007, 08h26
Tober
si tu veux garder les proportions de ton image, tu fais le rapport largeur/hauteur, par exemple une image 800x600, le rapport est de 4/3, donc quand tu vas augmenter ta hauteur et ta largeur, tu fais :
Code:

1 2 largeur = largeur + 10*(4/3) hauteur = hauteur + 10*(3/4)
et le tour est joué
30/08/2007, 10h23
UmanU

je les définies ou ces variables ?

moi je pensais qu'il falais metre sa dans les +'px' non ? ou alors séparer la hauteur de la largeur dans la fonction mais le code de mon post un peu plus haut ne fonctionne pas...
30/08/2007, 10h44
Tober

je te donne la mainère de procéder pour augmenter la taille de ton image si elle n'est pas carré (si elle l'est aussi d'ailleurs :mouarf:), après, c'est à toi de le faire !
30/08/2007, 11h06
UmanU

Oui je sais bien mais j'assai de le faire et sa donne rien ...
30/08/2007, 11h35
Tober

procède exactement comme le code que je t'avais filé au depart mais change juste les lignes qui agrandissent et reduisent l'image avec ce que je t'ai filé en dernier...

J'essai j'essai

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function grand(image, x, width, height)
    {
	if(x <= 426  )
	   {
		image.style.position = "relative";
	   }
	if(x < 600 )
	   {
		width = width + 10 * (4/3)
		height = height + 10 * (3/4)
		setTimeout(function(){grand(image, x+20)}, 1);
 
	   }
    }
function petit(image, y, width, height){
	if(y > 426){
		width = width + 10 * (4/3)
		height = height + 10 * (3/4)
		setTimeout(function(){petit(image, y-20)}, 1);
	} 
	else{
		image.style.position = "static";
	}
}

Mais je sens bien que ce n'est pas comme sa...

Tu pourrais me monter vite fait après j'essai d'adapter aux 4 blocks.

30/08/2007, 15h28
Tober

tu recopies drollement mal le code :aie:
le rapport largeur/hauteur doit etre utiliser pour la largeur (width) mais pour height, faut utiliser l'inverse... (donc hauteur/largeur)
en plus width et height c'est quoi dans tes fonctions ? faudrait ptete les utiliser pour modifier un jour la taille de l'image non ?
30/08/2007, 19h04
UmanU

Ha oui dsl erreur d'étourderie... ( j'ai édité)

Par contre la suite je comprends pas bien...

C'est pas ce que j'ai fait en remplacant ?
31/08/2007, 08h17
Tober

non, toi tu modifie le parametre width et height de la fonction, mais si tu modifies leurs valeurs, ca changera rien au programme général...
si tu veux modifier la largeur d'un element, tu le fais directement comme ça : document.getElementById("ton id").style.width = val + "px";
ou alors tu fias comme je t'ai dis de faire plus haut, tu recopies ma fonction qui passe en paramètre l'objet directement...
en fait, je pense comprendre ce que t'as pas compris :mouarf:
exemple : tu as une fonction changeLargeur(largeur); qui prend la largeur d'un objet, et toi tu penses que si dans la fonction changeLargeur, je change la variable largeur, ca changera la largeur de l'element aussi !
Hors dans tous (ou presque) langage de programmation, le passage de paramètre à une fonction se fait par copie des paramètres, c'est à dire dans mon exemple que c'est pas la largeur de l'objet que tu changes, mais la copie de la largeur de l'objet ! (tu comprends ? :aie:)
donc si tu veux changer la largeur d'un objet, au final, faut pas faire comme ça !
Il faut passer l'objet (enfin un pointeur sur l'objet :mouarf:) ET la largeur que tu veux mettre !

bon je sais pas si je suis clair, mais les explications et moi ça fait deux :aie:
quelqu'un pour lui expliquer mieux ? :roll:
31/08/2007, 12h04
UmanU

J'ai beau lire et relire ton post j'ai du mal a comprendre !! ^^

Sinon qqn veux bien me faire un exemple avec la premiere fonction et moi je le fait a l'autre fonction ?
31/08/2007, 21h51
UmanU

non personne ?
02/09/2007, 09h21
UmanU

allé svp...

ça sera ma page d'acceuil de mon site il faut que sa soit jolie !!
02/09/2007, 22h24
UmanU

Bon j'ai séparer mon images en quatre.

1er probleme : ce ne sont pas des carés mais des trapèzes alors quand je passe la souris sa mache pas super...

2eme : sa se superposse.... comment on fait pour que le zoom se fasse par un autre coté ?

Fuseau horaire GMT +2. Il est actuellement 02h32.