Discussion :

[pcsystemd]

Bonjour,

voila mon script fait un zoom de l'image au survol de la souris sur la vignette. Mais j'ai un souci car quand je survol les vignettes elles s'agrandissent bien lorsque je ne survol plus les images, selon ou je place le curseur dans la page elles restent agrandies et ne se ferme pas pour redevenir en vignettes, il faut que je les survole de nouveau pour que les vignettes s'affichent.

Voici mon script :

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
<script type="text/javascript">
 
function charge_d(binid){
 
       // alert('charged: ' + binid);
 
	document.getElementById('resus_'+binid).style.display='block';
 
	document.getElementById('resus_'+binid).style.display='none';
 
document.getElementById('resusig_d'+binid).style.display='block';
 
document.getElementById('resusig_g'+binid).style.display='block';
 
 
 
        }
 
 
 
function decharge_d(binid){
 
	//alert('decharged: ' + binid);
 
	document.getElementById('resusig_d'+binid).style.display='none';
 
	document.getElementById('resusig_g'+binid).style.display='none';
 
       document.getElementById('resus_'+binid).style.display='block';
 
}
 
</script>

et mes liens :

Dans un div la vignette

Code :

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

echo "<img src='/i/p_d_". $bie['r_dp'].".jpg' onMouseOver='charge_d(". $bie['id'] .")' />";

dans un autre div la grande image :

Code :

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

echo "<img src='/i/g_d_". $bie['r_dp'] . ".jpg' onMouseOut='decharge_d(". $bie['id'] .")'/>";

Merci de votre aide

[le_chomeur]

Bonjour,

Dans un div la vignette

Code :

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

echo "<img src='/i/p_d_". $bie['r_dp'].".jpg' onMouseOver='charge_d(". $bie['id'] .")' />";

dans un autre div la grande image :

Code :

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

echo "<img src='/i/g_d_". $bie['r_dp'] . ".jpg' onMouseOut='decharge_d(". $bie['id'] .")'/>";

Merci de votre aide

la même avec le code généré et non le code php et on peut commencer a t'aider

[pcsystemd]

Voici le code généré :

Les liens.

pour la vignette :

Code :

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

<img src='/i/p_dp_1.jpg' onMouseOver='charge_d(198092)' />

Pour l'image agrandie :

Code :

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

<img src='/i/g_dp_1.jpg' onMouseOut='decharge_d(198092)'/>

Merci

[le_chomeur]

heu okip , en l'état il manque des infos , les block avec ces id ???

de plus je pense qu'il y a possibilité d'optimisé

donne nous la portion de code complet

[pcsystemd]

Voici :

Pour les vignettes :

Code :

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

1
2
<div class="contr" style="float:right;">
<img src='/i/p_dp_1.jpg' onMouseOver='charge_d(198092)' />&nbsp;<img src='/i/p_g_2.jpg' onMouseOver='charge_d(198092)'/></div>

Pour les grandes images

Code :

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

1
2
3
4
5
<div class="resus" id="resusig_dp198092" style="display:none">
<img src='/i/g_dp_1.jpg' onMouseOut='decharge_d(198092)'/></div>
 
<div class="resus" id="resusig_g198092" style="display:none">
<img src='/i/g_g_2.jpg' onMouseOut='decharge_d(198092)'/></div>

[le_chomeur]

Ok

alors 2 solutions :
- première stocker toute tes id d'image dans un tableau js , ce qui te permettra de boucler sur le tableau pour tout masquer puis afficher uniquement l'élément voulut
- mettre toute tes images dans une div unique, avec un id , et tu affecte l'id sur l'image et non pas sur la div , puis tu récupères tous les id dans un tableau de manière non intrusive :


var listImg = document.getElementById('mesimages').getElementsByTagName('img');

<div id="mesimages">
</div>

il te restera a faire la méthode pour boucler et masquer toute les images avant d'afficher celle voulut

[pcsystemd]

Ok Merci pour l'info je vois.

Une petite question si j'ai bien compris le fonctionnement du OnMouseOver et OnMouseOut, lorsque l'image est agrandie, il suffit de retirer le curseur de l'image pour que la vignette s'affiche non? car pour moi lorsque l'image est agrandie, il faut que je repasse le curseur dessus pour que la vignette s'affiche de nouveau!!

[le_chomeur]

effectivement =>
onmouseover ( tu es dessus ) => on agrandit
onmouseout ( tu es sort) => on masque / diminue