simuler un clic bouton sur une image

13 juil. 2006, 19:24

Salut a toiu(te)s !!!

Avant ce we qui s'annonce plein de bon temps 8)
la reflexion nous est salutaire.

Alors voila mon probleme, j'ai un en-tete de page web developpée en php qui me permet d'écriire toutes les balises du header et qui m'affiche dans un tableau un menu.
un bouton = une case <td></td>
je souhaitais donc a partir de deux images afficher soit un background-image en relief positif (=bouton en haut) soit un relief negatif (=bouton non-selectionné ou en bas).
Mais impossible que ca marche : comment faire?????

voila mon code :

Code : Tout sélectionner

		function HH_swapImage() 
		{ 
			//XXX	ATTENTION	XXX
		//	nvelle fonctions dev par Moi le 13/07/06
		//
			document.getElementById("btn").style.background-image.location="btn_mouseout.gif";
			//this.style.background-image="url('img/btn_mouseover.gif')";
		}
		
		function HH_swapImgRestore() 
		{ 
			//this.style.background-image="url('img/btn_mouseout.gif')";
			document.getElementById("btn").style.background-image.location="btn_mouseout.gif";
			//fin 
		}

Code : Tout sélectionner

	  				echo '<table border="0" align="center" cellpadding="0" cellspacing="0">
	    					<tr>
	    						<td width="19"><img src="../img/menu_gauche.gif" width="19" height="30"></td>';
	  				
	  				//boucle sur tous les records
					for($i=0; $i<count($rubriques); $i++)
					{
						?>
						<td width="3"><img src="../img/entredeux.gif" width="3" height="30"></td>
						<td id="btn" class="barre_rubrique" onMouseOut="this.style.cursor='default';HH_swapImgRestore();" onMouseOver="this.style.cursor='pointer';HH_swapImage();">&nbsp;&nbsp;<?php echo $rubriques[$i]['linkname']?>&nbsp;&nbsp;</td>
			
						<?php
					}
					
					echo '<td width="3"><img src="../img/entredeux.gif" width="3" height="30"></td>';
					
					echo '		<td width="20"><img src="../img/menu_droite.gif" width="20" height="30"></td>
							</tr>
	  					</table>';

alors ca me parait logique (c'est pas tres fiable la veille d'un we), ca ressemble à ce que j'ai trouvé sur le web MAIS pas moyen que l'image change. !?!?

Je suis pas pro javascript alors merci aux généreux et talentueux senpai qui liront ce message et m'aideront.

13 juil. 2006, 23:48

Dans ta boucle sur les records, tu crées plusieurs cellule, mais elles ont toutes les même id "btn", du coup quand tu utilises la fonction getElementById("btn") il est completement déboussolé

Ce que tu peux fairet c'est créer dynamiquement l'id du champ (genre "btn" . $i) pour qu'ils soient tous différent et passer cet id en paramètre de ta fonction swapImage pour qu'il sache de quel id il s'agit.

ce que tu peux faire également pour donner un effet bouton sorti/enfoncé, au lieu d'utiliser les images, c'est jouer avec les styles sur les bordures de tes cellules.. une bordure claire en haut et à gauche (et foncée sur les autres) donne l'impression d'un bouton sorti, tandis que l'inverse (claire sur droite et bas) donne l'impression d'un bouton enfoncé.. il ne te reste plus qu'à changer de style au passage de la souris

17 juil. 2006, 10:19

merci des conseils Ryle ! : P
La méthode que l'on m'a conseillée ce matin c'est de passer par des CSS et hover, alors ca me donne ca :
Côté CSS :

Code : Tout sélectionner

	      #btnplus
	      {
	      	background-image:url(btn_mouseout.gif);
	      	background-repeat: repeat-x;
		...
	      }

	      #btnplus:hover
	      {
	      	background-image:url(btn_mouseover.gif);
	      	background-repeat: repeat-x;
		...
	      }

et PHP :

Code : Tout sélectionner

	  			<table class="bandeau" border="0" cellpadding="0" cellspacing="0">
	    			<tr>
	      				<td width="32"><img src="../img/aqua_gauche.gif" width="32" height="55"></td>
	      				<td  width="100%" class="menu_aqua_milieu" ><div class="baseline"><?php echo $msg_descriptif?></div></td>
	      				<td width="39"><img src="../img/aqua_droite.gif" width="39" height="55"></td>
	    			</tr>
	  			</table>
		  
	  			<?php
	  			//	LES RUBRIQUES DU SITE
	  			
	  			if (isset($rubriques[0]))
	  			{
	  				echo '<table border="0" align="center" cellpadding="0" cellspacing="0">
	    					<tr>
	    						<td width="19"><img src="../img/menu_gauche.gif" width="19" height="30"></td>';
	  				
	  				//boucle sur tous les records
					for($i=0; $i<count($rubriques); $i++)
					{
						?>
						<td width="3"><img src="../img/entredeux.gif" width="3" height="30"></td>
						<td id="btnplus" onMouseOut="this.style.cursor='default';" onMouseOver="this.style.cursor='pointer';">&nbsp;&nbsp;<?php echo $rubriques[$i]['linkname']?>&nbsp;&nbsp;</td>
			
						<?php
					}

ca marche sous firefox mais pas sous IE, je recherche pkoi?!?

Ce serait du a ce que hover n'est reconnu par IE que pour les balises <a href>, je retourne donc sur une fonction javascript, celle décrite au début de ce post.

17 juil. 2006, 14:29

J' ai trouvé une solution correcte :

je déclare deux classes CSS "barre_rubrique1" et "barre_rubrique2" qui ont chacune un background différent.

et je change par javascript la class de mon <td> avec les evenements onmouseover onmouseout.

Concrètement ca donne :

Code : Tout sélectionner

<td class="barre_rubrique" onMouseOut="this.style.cursor='default';this.className='barre_rubrique';" onMouseOver="this.style.cursor='pointer';this.className='barre_rubrique2';">&nbsp;&nbsp;<?php echo $rubriques[$i]['linkname']?>&nbsp;&nbsp;</td>

et dans ma CSS les deux class.

simuler un clic bouton sur une image

Qui est en ligne