Photo dynamique javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

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.

Voir 40 message(s) de cette discussion en une page