Sujet Précédent Sujet Suivant

[Javascript] Ajout de code onclick sur 1 lien

Résolu/Fermé
neo673 - 12 sept. 2007 à 17:48
 snip74 - 10 mars 2009 à 14:07
Bonjour à tous :))

Sur mon site, j'ai un menu que j'aimerais rendre un peu interactif avec javascript :)

Sur mon menu j'ai un lien Accueil. J'aimerais, quand je clique dessus, les sous-menus s'affichent à la suite.

En d'autres termes plus simples, j'aimerais ajouter quand je clique sur accueil, ce bout de code : 
  <td bgcolor=#336185" class="liensousmenu">
    <img src="entre_ss_titre.png" alt=""/>
    <img src="fleche.png" alt=""/><a class="menuitems" href="index.php?page=identification">Identification</a>
  </td>
</tr>




Mon lien accueil se présente comme ceci : 
<a class="menuitems" href="index.php?page=news" onclick="ouvre_ss_menu">Accueil</a>



Merci pour votre aide car je suis vraiment mauvais en javascript :)
A voir également:

8 réponses

Réponse 1 / 8
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
13 sept. 2007 à 15:48
Lorsqu'une option d'un menu permet de masquer/afficher des sous-menus comme par ex l'option Etudiant on n'associe généralement pas de lien avec. Seules les sous-options du sous-menu sont censées rediriger vers un lien.
En effet si lorsque tu cliques sur Etudiant tu affiches le sous-menu qui disparâit aussitôt pour laisser la place à une nouvelle page à quoi bon ?

Normalement un menu ne devrait jamais être rechargé. Cependant afin de ne pas se brider avec les frames c'est souvent ce qu'on fait.



Par contre en PhP on peut éventuellemnt changé de pages en pré-déroulant un menu donné.

Par ex
1 : Tu charges ta page d'accueil avec le menu : aucun sous-menu n'est affiché
2 : Tu cliques sur le lien Etudiant
3 : La page Etudiant est alors chargée : cette page contient également le menu et affiche le sous-menu étudiant

Ce qui donne :

styles.css (feuille de styles) : 


*
{
	font-family : arial;
}

.menu
{
	font-size : 12pt;
	font-weight : bold;
	font-color : #0000C0;
}

.sous_menu 
{
	font-size : 10pt;
	font-weight : normal;
	font-color : #0000C0;
	margin-left : 20px;
}

.titre
{
	font-size : 18pt;
	font-weight : bold;
}





main.php (page de démarrage) : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<?php
include('menu.php');
?>
</body>
</html>




menu.php : 

<?php
$menuID="";
if (isset($_GET["menuID"])) $menuID=$_GET["menuID"];
?>
<table class="menu" width="200px">
	<tr>
		<td>
			<a href="page_accueil.php?menuID=accueil">Accueil</a>	
			<?php
				if ($menuID == "accueil")
				{

					include("sousmenu_accueil.php");
				}
			?>
					
		</td>
	</tr>
	

	<tr>
		<td>
			<a href="page_etudiant.php?menuID=etudiant">Etudiants</a>	

			<?php
				if ($menuID == "etudiant")
				{

					include("sousmenu_etudiant.php");
				}
			?>
					
		</td>
	</tr>
</table>




page_acccueil.php : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page accueil</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<table>
	<tr>
		<td>
		<?php 
			include('menu.php');
		?>
		</td>
		
		<td>
			<p class="titre">Vous êtes sur la page accueil ! </p>
		</td>
	</tr>
</table>
</body>
</html>



page_etudiant.php : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page étudiant</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<table>
	<tr>
		<td>
		<?php 
			include('menu.php');
		?>
		</td>
		
		<td>
			<p class="titre">Vous êtes sur la page étudiant ! </p>
		</td>
	</tr>
</table>
</body>
</html>




Copie toutes les pages dans un sous-répertoire accessible à ton serveur PHP en les nommants comme indiqué puis lance
http://(adresse de ton serveu PHP)/main.php


1
Réponse 2 / 8
neo673
14 sept. 2007 à 11:14
merci encore pour ton aide ;)

je l'ai fais selon ton exemple en php,ca fonctionne pas mal !!

http://www.duotone.ch/neo/AnciensEtudiants/index.php

ps : les erreurs d'include c'est normal j'ai pas encore mis les pages derrière ;)

Problème résolu donc ;) merci !!
1
Réponse 3 / 8
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
14 sept. 2007 à 18:02
Bjr

Oui en effet c nickel comme ça ;-)

En plus avec le haut débit on a l'impression d'avoir affaire à un vrai menu.


Bon développement.

@+

1
snip74
10 mars 2009 à 14:07
Bonjour ,
je viens de trouvé cette source et je c'est que je suis pas au bon endroit.
mes se que je cherche c'est de proposé en un seule clic sur le même boutton de mettre notre page a démarrage sans les obligers.
je m'explique mes avant tout voici le code.
<input type="submit" value="Accéder au T'chat" onclick="return open_chat()"><hr>

j'aimerai qu'une personne qui clic sur Accéder au T'chat et une alerte provisoire qui lui propose d'ajouter notre page en démarrage (compatible pour FF et IE) si la personne clic sur oui ou sur non que son clic sois que son clic et validé et a la prochaine connections sa ne lui propose plus.
donc j'accède au tchat voulez vous mettre le tchat en page démarrage (oui/non) un cookie se créer je reviens demain je refait et j'accède au tchat sans aucune alerte. merci d'avance de toute l'aide que vous pourrais m'apportai.
Cordialement Stéphane
0
Réponse 4 / 8
neo673
12 sept. 2007 à 17:49
Si c'est possible de le faire en php je suis pas contre , au contraire :))
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
12 sept. 2007 à 18:08
Bsr

Oui c'est possible d'ajouter du code HTML dynamiquement avec Javascript.

Mais je ne comprends pas très bien ce que tu veux faire. Lorsque tu cliques sur ton lien Accueil ça te charge déjà la page index.php?page=news non ? Donc ça rique de recharger également ton menu à moins que tu n'utilises des frames.

Pourrais tu poster l'adresse de ta page histoire d'accèder à tout le code ?


0
Réponse 6 / 8
neo673
12 sept. 2007 à 18:31
oui effectivement ca me charge directement la page news, cependant, sous accueil, j'aurai d'autres sections, genre Identification, Recherche Utilisateur etc... et je pensais que ca pouvais être sympa :)

voici le lien : www.duotone.ch/neo/AnciensEtudiants/

Je suis sur que le script ou le code php doit etre tout con :p
0
Réponse 7 / 8
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
13 sept. 2007 à 11:09
Bonjour

heu non ajouter dynamiquement du code à un tableau en manipulant DOM via Javascript n'est pas une mince affaire .... :-(


En Php c'est assez simple tu passes une variables à ta page et en fonction de sa valeur vrai/faux par ex tu inclus ou tu n'inclus pas le sous-menu. Cependant dès que tu as plusieurs sous-menu ça devient vite compliqué ...


Une autre façon de faire en JavaScript + feuille de style CSS est de jouer sur l'affichage/le masquage des sous-menus grace à l a propriété display. Ta page contient toujours le code des sous-menus : son contenu ne change plus dynamiquement et ça change tout :-) Par contre il faut virer les styles intégrés directement dans les balises (quelle horreur !!!!) et utiliser les feuilles de style.

Ex : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style>

*
{
	font-family : arial;
}

.menu
{
	font-size : 12pt;
	font-weight : bold;
	font-color : #0000C0;
}

.sous_menu 
{
	font-size : 10pt;
	font-weight : normal;
	font-color : #0000C0;
	margin-left : 20px;
	display : none;
}

</style>


<script type="text/javascript">
<!--
function toggle(menuID)
{
	var elt = document.getElementById(menuID);


	// Recherche du style en cours : attention le style en cours est read-only!
	var eltStyle = elt.currentStyle || window.getComputedStyle(elt, null);

	if (eltStyle.display == "none")
	{
		elt.style.display = "block";
	}
	else
	{
		elt.style.display = "none";
	}

}

//-->
</script>

</head>

<body>
<table class="menu">
	<tr>
		<td>
			<a href="javascript:void(0);" onclick="toggle('accueil')">Accueil</a>	

			<table id="accueil" class="sous_menu">
				<tr>
					<td>
						<a href="javascript:void(0);">Identification</a>	
					</td>
				</tr>
				<tr>
					<td>
						<a href="javascript:void(0);">Recherche</a>	
					</td>
				</tr>
			</table>
					
		</td>
	</tr>
	

	<tr>
		<td>
			<a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a>	

			<table id="etudiant" class="sous_menu">
				<tr>
					<td>
						<a href="javascript:void(0);">Sous-menu 1</a>	
					</td>
				</tr>
				<tr>
					<td>
						<a href="javascript:void(0);">Sous-menu 2</a>	
					</td>
				</tr>
			</table>
					
		</td>
	</tr>

</table>

</body>
</html>



je te laisse essayer et t'en inspirer


tester sous IE et FF

Voilà

0
Réponse 8 / 8
neo673
13 sept. 2007 à 14:32
waouh!!!! merci bien :)


cependant comment fait l'utilisateur pour naviguer si les urls sont :

<a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a>

je peux pas les redirigé comme ici dans ton exemple vers une page étudiants.


Merci beaucoup pour ton aide en tout cas :))
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses
Comment savoir comment on nous a ajouté sur Snap
Laura -
Mariana -

13 réponses
Comment retrouver des lien copier sur sont téléphone
SAMA -
Lylou -

2 réponses