Aller au contenu

Affichage dynamique lien HTML


I_Love_Myself

Messages recommandés

Membre+, Vendeur de rêve, 35ans Posté(e)
I_Love_Myself Membre+ 7 363 messages
35ans‚ Vendeur de rêve,
Posté(e)

Bonsoir à tous,

Cela fait plusieurs heures que je creuse la tête sur une question..

Je vais essayer d'expliquer le plus clairement possible.

Je voudrai connaître un code HTML et PHP qui permet l'affichage d'un texte en cliquant sur un lien.

En quelque sortes, si je clique sur "En savoir plus" sur une page, au lieu d'ouvrir une nouvelle page, un nouveau texte apparaît à la place de ce lien. (et donc sur la même page).

Pour être encore plus concret.

Il s'agit d'une page sous wordpress.

Je voudrai utiliser de façon plus poussée la balise "more".

En cliquant sur "Lire la suite de l'article", je voudrai qu'au lieu qu'une nouvelle page s'ouvre sur l'article en entier, la lien se remplace par un nouveau texte (un texte très court, 2-3 lignes max), mais surtout sur la même page.

Est-ce que vous connaissez un type de lien qui permet d'ouvrir "à la place du lien", ou d'un plugin wordpress, etc..

Je me débrouillerai à bidouiller les codes après.

Merci à ceux qui pourrons m'aider.

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant
Membre, Explorateur de Nuages, 46ans Posté(e)
Pheldwyn Membre 23 636 messages
46ans‚ Explorateur de Nuages,
Posté(e)

Avec du Javascript, c'est possible.

Tu as deux possibilités :

- soit tu écris par avance ton texte dans une balise DIV invisible (<div id="more" name="more" style="display: none;">Mon texte</div>), et tu ajoutes un gestionnaire d'event onClick sur ton lien qui appellera une fonction JS chargée de changer le paramètre display de none vers block.

- soit tu écris par avance un div vide (<div id="more" name="more"></div>), et tu ajoutes un gestionnaire d'event onClick sur ton lien qui appellera une fonction JS qui insérera le texte dans le div grâce à la propriété innerHTML du div (Le javascript peut même faire une requête vers un script PHP avec HttpRequest, mais là en fait on tombe dans de l'ajax, et pour 2-3 lignes ce n'est pas très utile).

La première méthode est à mon sens plus adaptée. Si tu veux masquer le lien une fois cliquer, il faut simplement le mettre dans un div et cacher ce div (style.display=none) lors de l'appel de la fonction JS.

Lien à poster
Partager sur d’autres sites

Membre+, Vendeur de rêve, 35ans Posté(e)
I_Love_Myself Membre+ 7 363 messages
35ans‚ Vendeur de rêve,
Posté(e)

Merci beaucoup pour ta réponse Pheldwyn,

Effectivement la solution 1 semble mieux appropriée.

Saurez-tu me donner un lien exemple en js ?

J'ai trouver ceci: onclick="this.style.display='inline'"

Mais cela veux dire que tout simplement dans mon lien j'aurai quelque chose du genre:

<a href="#" onclick="this.style.display='inline'"> Lire la suite </a>

Je suis quasiment sûr d'être à coté de la plaque sur le lien.. mais là j'ai plus trop l'imagination créative.

Lien à poster
Partager sur d’autres sites

Membre, 110ans Posté(e)
davs Membre 4 773 messages
Baby Forumeur‚ 110ans‚
Posté(e)

je connais pas trop JavaScript, je suis plus dans l' action-script ( flash ) ^^ mais je t'ai trouvé ca :

crée une fonction en JS :

<script LANGUAGE="JavaScript">
function disp(calque){
var i=0;
while ( document.getElementById(calque+i) != null ){
var styl =document.getElementById(calque+i).style;
styl.display=styl.display=="none"?"block":"none";
i++;
}
}
</SCRIPT>

puis un bouton :

<input type=button onclick=disp('calque'); value="Afficher/Cacher la légende">

puis un ton DIV :

<div id="calque1" style="display: none;">a</div>

Lien à poster
Partager sur d’autres sites

Membre+, Vendeur de rêve, 35ans Posté(e)
I_Love_Myself Membre+ 7 363 messages
35ans‚ Vendeur de rêve,
Posté(e)

Ok je teste ce dans la soirée.

Je te remercie !

Lien à poster
Partager sur d’autres sites

Membre+, Vendeur de rêve, 35ans Posté(e)
I_Love_Myself Membre+ 7 363 messages
35ans‚ Vendeur de rêve,
Posté(e)

humm ne semble pas vouloir marché

Lien à poster
Partager sur d’autres sites

Membre, Explorateur de Nuages, 46ans Posté(e)
Pheldwyn Membre 23 636 messages
46ans‚ Explorateur de Nuages,
Posté(e)

Personnellement, j'ai des fonctions js de base dans un fichier que j'inclus lorsque j'en ai besoin. Par exemple :

  // - getElement
function getElement(id) {
  if ( document.getElementById )  { return document.getElementById(id); }
  else if ( document.all )		{ return document.all[id]; }
  else if ( document.layers )	 { return document.layers[id]; }
  return false;
}

 // - getStyle
function getStyle(id) {
  var element = getElement(id);
  if (element && element.style) {
	  return element.style;
  } else {
	  return false;
  }
  }

 // - Show
function showDiv(id) {
  var style = getStyle(id);
  if ( style ) {
	style.display= 'block';
  }
  }

 // - Hide
function hideDiv(id) {
  var style = getStyle(id);
  if ( style ) {
	style.display= 'none';
  }
}

Tout ça dans un fichier functions.js introduit dans ma page HTML entre les balises head :

  <script language="Javascript" src="function.js"></script>

Ensuite, pour un code rapide de ta page :

<div id="divLien" name="divLien" onClick="showDiv('divDesc'); hideDiv('divLien')">
 Mon lien
</div>
<div id="divDesc" name="divDesc" style="display:none;">
 Description du lien
</div>

Lien à poster
Partager sur d’autres sites

Annonces
Maintenant

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×