[site html] recherche code

anne -  
bonjour,
je suis webmaster d'un site pour une asso culturelle, j'ai quelques notions de html.
J'aimerais savoir si c'est possible ( et si oui comment) de créer un lien qui permettrait de faire apparaitre par un clic l'information reliée sous le(s) mot(s) soulignées en lien...

exemple :

lien 1
lien 2
lien 3

si je clique sur lien 1, je voudrais obtenir :

lien 1
<xxxxinformationxx
xxtableauxxtextexx
xxjpgxxxxxxxxxxx>
lien 2
lien 3

j'espère être assez claire pour que vous puissez m'aider.
Anne.

4 réponses

  • Votes
  • Date
  • Date décroissante
  1. Ssylvainsab Modérateur
    Il faut utiliser du javascript (onclick) ou du css (active).

    Le CSS risque de ne pas fonctionner sous IE, donc je suggère du javascript.

    Je sais que c'est possible, mais je ne sais pas comment faire.
    1. anne
      peux tu me conseiller un site où je vais trouver le javascript ?
  2. Bulb
    Bonjour Anne,

    Il est tout à fait possible de faire ce que tu demande,
    si tu à beaucoup de liens cela va être un peu compliqué mais si tu n'en a que quelques un je te propose ceci: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Pour Anne</title>
<SCRIPT language="javascript">
function show_lien1() { //Je crée une fonction
		document.getElementById('lien1').style.display = 'inline'; //afficher le l'objet qui porte l'id  "lien1"
}
function show_lien2() { //Je crée une fonction
		document.getElementById('lien2').style.display = 'inline'; //afficher le l'objet qui porte l'id  "lien2"
}
function show_lien3() { //Je crée une fonction
		document.getElementById('lien3').style.display = 'inline'; //afficher le l'objet qui porte l'id  "lien3"
}
</SCRIPT>
</head>
<body>
Entrez votre choix :<br>
<a href="#" onClick="javascript:show_lien1();">description 1</a><br>
<span id="lien1" style="display:none">Bonjour, vous avez cliquez<br>
sur le lien intitul&eacute; "description1"<br></span>

<a href="#" onClick="javascript:show_lien2();">description 2</a><br>
<span id="lien2" style="display:none">Bonjour, vous avez cliquez<br>
sur le lien intitul&eacute; "description2"<br></span>

<a href="#" onClick="javascript:show_lien3();">description 3</a><br>
<span id="lien3" style="display:none">Bonjour, vous avez cliquez<br>
sur le lien intitul&eacute; "description3"<br></span>

</body>
</html>


    Malheureusent une fois que tu a cliqué une fois sur le lien impossible de revenir en arriere :D c'est la qu'est toute la difficulté... voici donc une solution "final": 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Pour Anne</title>
<SCRIPT language="javascript">
function show_lien1() { //Je crée une fonction
	if (document.getElementById('lien1').style.display == 'none'){
		document.getElementById('lien1').style.display = 'inline'; //afficher le l'objet qui porte l'id  "lien1"
		}else{
		document.getElementById('lien1').style.display = 'none'; //cacher le l'objet qui porte l'id  "lien1"
		}
}


function show_lien2() { //Je crée une fonction
	if (document.getElementById('lien2').style.display == 'none'){
		document.getElementById('lien2').style.display = 'inline'; //afficher le l'objet qui porte l'id  "lien2"
		}else{
		document.getElementById('lien2').style.display = 'none'; //cacher le l'objet qui porte l'id  "lien2"
		}
}


function show_lien3() { //Je crée une fonction
	if (document.getElementById('lien3').style.display == 'none'){
		document.getElementById('lien3').style.display = 'inline'; //afficher le l'objet qui porte l'id  "lien3"
		}else{
		document.getElementById('lien3').style.display = 'none'; //cacher le l'objet qui porte l'id  "lien3"
		}
}
</SCRIPT>
</head>
<body>
Entrez votre choix :<br>
<a href="#" onClick="javascript:show_lien1();">description 1</a><br>
<span id="lien1" style="display:none">Bonjour, vous avez cliquez<br>
sur le lien intitul&eacute; "description1"<br></span>

<a href="#" onClick="javascript:show_lien2();">description 2</a><br>
<span id="lien2" style="display:none">Bonjour, vous avez cliquez<br>
sur le lien intitul&eacute; "description2"<br></span>

<a href="#" onClick="javascript:show_lien3();">description 3</a><br>
<span id="lien3" style="display:none">Bonjour, vous avez cliquez<br>
sur le lien intitul&eacute; "description3"<br></span>

</body>
</html>
    1. dugenou Contributeur
      Bonjour,

      Tu peux tout simplement utiliser l'attribut "title" dans ton lien :

      <a href="page.html" title="Description du lien">Lien</a>
      1. Ssylvainsab Modérateur
        Effectivement, mais ce ne serait qu'une infobulle, pas personalisable du tout, et ou l'on ne peut mettre que du texte.