[Resolu]Action qui revois malgré moi en haut de page...

Bonjour,

Voila, j'ai créer des vignettes qui une fois cliqué dessu, font apparaître l'image en plus grand.

Voici le lien -> http://www.dournaux.com/test2.php#

J'ai volontairement meis des saut de ligne en haut de page pour vous montrer mon probleme. En effet, quand je clique sur une vignette, les images ce charge bien au dessu, mais ma page remonte a chauqe fois, ce qui oblige le scroll pour revenir a sur les vignettes.

Tout le code est visualisable en view source (je vous colle le code quand meme).

Merci

Voici le code javascript :

<script type="text/javascript">

<!--
window.onload=montre;

function montre(id) 
{
	if (id==undefined){id='smenu1';}
	var d = document.getElementById(id);
	for (var i = 1; i<=12; i++) 
	{
		if (document.getElementById('smenu'+i)) 
		{
			document.getElementById('smenu'+i).style.display='none';
			document.getElementById('smenu'+i).style.visibility='hidden';
		}
	}
	if (d)	
	{	
		d.style.visibility='visible';
		d.style.display='block';	
	}
	else
	{	
		document.getElementById('smenu1').style.visibility='visible';
		document.getElementById('smenu1').style.display='block';	
	}
	
}
//-->


</script>

les Div

<div id="fc_box_photos">
	
		<div id="fc_box_img" >
			<div id="smenu1" class="fc_img"  style="visibility: hidden">
				<img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn200/TN_0dmz0tenkx.jpg"  border="0" />
			</div>
			<div id="smenu2" class="fc_img"  style="visibility: hidden">
				<img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn200/TN_nspmbw9ifw.jpg"  border="0" />
			</div>
			<div id="smenu3" class="fc_img"  style="visibility: hidden">
				<img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn200/TN_0dmz0tenkx.jpg"  border="0" />
			</div>
			<div id="smenu4" class="fc_img"  style="visibility: hidden">
				<img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn200/TN_nspmbw9ifw.jpg"  border="0" />
			</div>
			<div id="smenu5" class="fc_img"  style="visibility: hidden">
				<img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn200/TN_0dmz0tenkx.jpg"  border="0" />
			</div>
			<div id="smenu6" class="fc_img"  style="visibility: hidden">
				<img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn200/TN_nspmbw9ifw.jpg"  border="0" />
			</div>
		</div>

		<div id="fc_box_mini_taille">
		
			<div id="fc_img_mini" onclick="javascript:montre('smenu1');" class="wraptocenter">
			 <a href="#"><span></span><img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn/TN_0dmz0tenkx.jpg" width="65%" border="0" /></a>
			</div>
			<div id="fc_img_mini" onclick="javascript:montre('smenu2');" class="wraptocenter">
			 <a href="#"><span></span><img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn/TN_nspmbw9ifw.jpg" width="65%" border="0" /></a>
			</div>
			<div id="fc_img_mini" onclick="javascript:montre('smenu3');" class="wraptocenter">
			 <a href="#"><span></span><img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn/TN_0dmz0tenkx.jpg" width="65%" border="0" /></a>
			</div>
			<div id="fc_img_mini" onclick="javascript:montre('smenu4');" class="wraptocenter">
			 <a href="#"><span></span><img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn/TN_nspmbw9ifw.jpg" width="65%" border="0" /></a>
			</div>
			<div id="fc_img_mini" onclick="javascript:montre('smenu5');" class="wraptocenter">
			 <a href="#"><span></span><img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn/TN_0dmz0tenkx.jpg" width="65%" border="0" /></a>
			</div>
			<div id="fc_img_mini" onclick="javascript:montre('smenu6');" class="wraptocenter">
			 <a href="#"><span></span><img src="http://media.chiens-de-france.com/chiens/t_chien_03/tn/TN_nspmbw9ifw.jpg" width="65%" border="0" /></a>
			</div>

		</div>	

	</div>	

(tout est visualisable en vieux source)
Modifié par papayou (22 May 2006 - 17:58)

C'est un problème en effet quand on débute en javascript et que l'on met attribue un evenement sur un lien.
En faît c'est tout simple, lors du clique le lien pointe vers # (href="#") ce qui a pour effet de "scroller" en haut de la page même si ceci execute le javascript via l'evenement onclick ou les autres evenement (onmouseup & onmousedown).

Pour y remedier on peut supprimer l'attribut href (href="#") (qui apparement n'est pas obligatoire en XHTML), mais il arrive que l'on en ai besoin (par exemple si le client n'a pas javascript ou qu'il est désactivé) dans ce cas on mettra quand même le href (qui pointera vers la page qui permettra de faire l'action sans javascript) et on ajoutera la méthode onclick du lien la valeur retourné false :

<a href="index.php?hidden_smenu=smenu10" onclick="montre('smenu10'); return false;">Lien</a>

Et voila plus de "scroll" à chaque clicks !

Exemple : desactiver un lien en javascript

<a href="www.alsacreations.com" onclick="return false;">Lien</a>

Par contre je vois une chose dans ton code javascript :

a écrit :

onclick="javascript:montre('smenu5');"

le "javascript:" n'a rien à faire ici ! Le onclick du lien c'est une methode appellée lors d'un evenement c'est comme ci tu l'écrivait :

function onclick()
{
  //javascript: //javascript ne comprendra pas ce que c'est
  montre('smenu5');
  return false;
}

Comment ce sentir en couillon en une leçon

Réponse propre et sans bavure. Merci problème résolu.
Modifié par papayou (22 May 2006 - 18:10)