Partage

Afficher un texte en cliquant sur un lien

14 novembre 2017 à 16:39:49

Bonjour,

Voilà j’ai un menu en Css qui fonctionne très bien je voudrais lui apporter une modification.

Lorsque je clique sur un lien j’aimerai qu’il affiche un texte dans un endroit bien précis de la page.

Voici mon code Html :

<nav>
              	                                                  <div class="menu">
                                                                        <ul>
                  	
                  	<li class="menu-Accueil"> <a href="accueil.html" >Accueil</a></li>
                  	<li class="menu-Drapeaux"><a href="../dossier_drapeaux/drapeaux_index.html"target="myFrame2">Drapeaux</a></li>
                  	<li class="menu-Carte">   <a href="../dossier_carte/carte_index.html" target="myFrame2">Cartes SVG</a></li>
                  	<li class="menu-Blasons"> <a href="../dossier_armorial/armorial_index.html" target="myFrame2">Blasons</a></li> 
                  	<li class="menu-Divers">  <a href="../heure_Gmt/heure_GMT_index.html" target="myFrame2">Heures GMT</a></li>  
                        <li class="menu-Divers">  <a href="../dossier_hymnes/hymnes_index.html" target="myFrame2">Hymnes Nationaux</a></li>
                        <li class="menu-Divers">  <a href="../dossier_capital/capital_index.html" target="myFrame2">Capital du Monde</a></li>
                                                                        </ul>
                                                                        </div>           
                       </nav>

Mon code Css

 body{
    background: #000;
    font-family: ,Calibri, serif;
    margin: 0px;
    padding: 0px;}
nav{
	width: 100%;
    color: #fff;}
nav ul{
	  margin: 0px;
	  padding: 0px;
	  overflow: hidden; }
nav li{
	   list-style-type: none;
	   float: left;}
nav a{
	 display: inline-block;
	 text-decoration: none;
	 padding: 20px 20px;
	 color: #FFF;}  
.menu-Accueil:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);}
.menu-Drapeaux:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);}
.menu-Carte:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);}
.menu-Blasons:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);  }
.menu-Divers:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);   }
nav li:hover a{
	padding: 15px 30px 20px 30px;   }
.table{
	display: table;
	margin: 0 auto;    }
a:link { 
     color:#ffffff;
 text-decoration:none; }

J vous remercie de votre aide

Cordialement

Max

Cordialement
14 novembre 2017 à 17:07:38

Salut je veut bien t'aider mais tu n'ai pas assez précis dans ce que tu dit !

  • quel texte !
  • où ?
Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
14 novembre 2017 à 17:24:32

Salut noopy,

chaque lien ouvre une page chaque page a un titre c'est se titre que je veut qu'il affiche ou,

en haut a droite de la même page ou se trouve le menu qui reste en permanence visible puisque la page s'ouvre dans une frame.

j’espère avoir répondu aux questions.

@+

Max

Cordialement
14 novembre 2017 à 17:38:06

Re salut, alors soit j'ai pas compris ou alors ... je ne vois pas ou ce trouve la difficulter dans chaque pages tu ajoute un <h1></h1> puis en CSS tu modifie ça taille puis sont alignement dans sont parent

<h3>Ton titre</h3>
h3{
	display:inline-block;
	float:right;
}

Voilà après j'ai peut être pas bien compris

Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
14 novembre 2017 à 17:52:54

Re,

J'ai du mal m'expliquer. Je reprend Sur ma page "Accueil" j'ai mon menu

                                Accueil    Drapeaux     Carte SVG     Blasons ect.......

Lorsque je clique sur ex: "Drapeaux" je voudrais que s'affiche le mots drapeaux en à gauche de ma page "accueil"

J’espère être plus explicite

@+

Max

Cordialement
14 novembre 2017 à 18:01:13

Ah oki je comprend mieux alors tu peut le faire en PHP je t'invite à regarder cette partie du cour --> Transmettre des données avec l'URL

sinon je te donne ce qu'il te faut dans le lien de ton menu

exemple pour drapeau 

<li class="menu-Drapeaux"><a href="../dossier_drapeaux/drapeaux_index.html"target="myFrame2">Drapeaux</a></li>
// Modifie en 
<li class="menu-Drapeaux"><a href="../dossier_drapeaux/drapeaux_index.html?titre=drapeaux"target="myFrame2">Drapeaux</a></li>

puis dans la page ou il y aura le titre

<h1><?php echo $_GET['titre']; ?></h3>

Voilà


Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
14 novembre 2017 à 18:14:43

Re,

Je viens d'essayer sa ne fonctionne pas ou alors????

Cordialement
14 novembre 2017 à 18:20:25

ah oui dsl je l'ai pas dit car pour moi c'est logique mais le PHP et un langage serveur il te faut une application capable de comprendre ce langage ou alors mettre ta page sur un serveur FTP il faut aussi que tu change l’extension de la page ou le titre va s'afficher de "*.html" en "*.php"
Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
14 novembre 2017 à 18:25:22

Re,

Non je ne peut pas sa me changerez tous mon systeme

Cordialement
14 novembre 2017 à 18:30:19

sans passer par du php je ne pense pas que cela soit possible ou alors peut être via le javascript mais je ne connais pas encore ce language...
Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
14 novembre 2017 à 18:31:34

Re,

Je te remercie je vais essayer du côté du javascript

Bonne soirée

Cordialement
15 novembre 2017 à 1:02:10

Bonsoir, tu ne peux pas faire ça en php car c'est un langage côté serveur, il n'y a donc pas de rechargement DYNAMIQUE de ta page, le css ne te permet pas non plus de faire ça car c'est un langage de mise en forme et ne possède aucun dynamisme. Pour faire ce que tu veux, tu es effectivement obligé d'utiliser le javascript.
15 novembre 2017 à 2:09:09

Hello,

Alors perso ta demande n'est pas claire du tout ^^ 

- Tu a la pseudo-class :target qui permet de détecter un clic sur un élément HTML, on peut afficher un texte.

- Langage serveur, passer à paramètre GET[] dans l'url, l'analyser et générer la page HTML en retour.

- Idem mais avec Ajax (js+php ou autre), aucun rechargement de la page, seulement l'élément HTML (text) à afficher.

- Annuler l'action du clic sur un lien HTML en Javascript, c'est possible, mais du coup je ne vois pas l'intérêt de passer par un lien.

Ce que tu demandes semble simple mais tu l'expliques mal ^^, ou alors tu as un problème de conception ( navigation mal pensée)

15 novembre 2017 à 7:46:30

Je trouve que tu as été on ne peut plus précis pour décrire quel est ton problème. Peu importe le texte et peu importe où il doit s'afficher. Le point important est que tu veux établir un lien entre deux éléments qui n'ont peut-être aucun lien du point de vue de la structure de ton code html. Pour établir ce lien, peut-être inexistant, tu es obligé d'utiliser le javascript, car le javascript représente ton code html sous la forme de DOM, à ce que je saches (je me trompe peut-être), en php il n'y a pas de DOM.
15 novembre 2017 à 11:31:15

me_moi: je te félicite, moi quelqu'un qui m'expose son problème comme tel me laisse dans le floue, d'ailleurs les solutions sont longues à arrivées...

On peut en effet parcourir et modifier le DOM via le JS, ou avec certaines librairies spécialisées.

Tout faire sans langage serveur, on peut analyser l'url et récupérer des paramètres en JS, mais il ne faut pas transiter de données sensibles.

Finalement un Framework du style Angular serait adapté à la demande.

Sur ce je vous lasse car je ne m'intéresse qu'aux sujet bien explicites, bonne continuation :)

15 novembre 2017 à 14:01:19

Salut,

Tout comme Lucky13, j'avoue ne pas comprendre grand chose à ta demande.

D'après ce que j'ai compris, je serais tenté d'utiliser Vue.js :

1) Tu mets une div de ce type là où tu veux afficher ton texte (en haut à gauche de ta page si j'ai bien suivi) :

<div id="app">
  {{ message }}
</div>

2) Tu ajoutes ce script en bas de page avec les autres : 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Le texte que tu veux afficher'
  }
})

J'ai cru comprendre que tu n'avais que des fichiers HTML, avec cette méthode tu vas donc devoir faire cela pour chacune de tes pages. Cela aurait été plus simple avec des variables mais tu vas devoir trouver un moyen de faire autrement. Peut être en mettant le le texte dans un attribut du style "date-title" sur chacun des liens de ton menu puis en récupérant le contenu de cet attribut ?

Bon par contre si tu ne t'y connais déjà pas beaucoup en JS ce n'est probablement pas la meilleure idée de partir sur du Vue.js d'entrée de jeu...

-
Edité par Mewen_bzh 15 novembre 2017 à 14:08:03

Afficher un texte en cliquant sur un lien

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown