High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

[Javascript] Ajout de code onclick sur 1 lien

Dernière réponse le 10 mar 2009 à 14:07:36 neo673, le 12 sep 2007 à 17:48:05 
 Signaler ce message aux modérateurs

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 :)
Configuration: Windows XP
Firefox 2.0.0.6

Meilleures réponses pour « [Javascript] Ajout de code onclick sur 1 lien » dans :
La compilation et les modules en C et en C++ VoirCet article a pour vocation d'introduire les notions de bases de la compilation en C et en C++ et de la programmation modulaire. Il permet de mieux comprendre les messages d'erreur du compilateur. Les notions abordées ici sont indépendantes du...
Javascript - Implantation du code VoirA quel emplacement insérer le Javascript dans votre page HTML Il existe plusieurs façons d'inclure du JavaScript dans une page HTML : Grâce à la balise En mettant le code dans un fichier Grâce aux événements Dans la balise...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Posez votre question Répondre

1

neo673, le 12 sep 2007 à 17:49:33

Si c'est possible de le faire en php je suis pas contre , au contraire :))

   
Répondre à neo673

2

PhP, le 12 sep 2007 à 18:08:23

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 ?


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

3

neo673, le 12 sep 2007 à 18:31:03

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

   
Répondre à neo673

4

PhP, le 13 sep 2007 à 11:09:34
  • +1

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à

PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

5

neo673, le 13 sep 2007 à 14:32:03

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 :))

   
Répondre à neo673

6

PhP, le 13 sep 2007 à 15:48:26
  • +1

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


PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

7

neo673, le 14 sep 2007 à 11:14:48

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 !!

   
Répondre à neo673

8

PhP, le 14 sep 2007 à 18:02:09

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.

@+

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

   
Répondre à PhP

9

 snip74, le 10 mar 2009 à 14:07:36

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

   
Répondre à snip74
Posez votre question Répondre
Ils ont besoin de votre aide