Discussion :

[ryohazuki100]

Bonjour.

j'ai créer dans le corps de ma page deux blocs côte à côte.
Mon bloc de gauche contiens des liens.
je souhaiterais que lorsque je clic ou je survole la souris sur mes lien dans le menu gauche le contenu cible s'affiche dans mon bloc de droite.
Je ne sais pas comment faire cela, si quelqu'un peux m'aider c'est vraiment sympa.
(je suis sur joomla)
Dans l'idée je pense faire un tableau sans bordure 2 colonnes, sur 5 ligne dans la 1ere colonne et 1 seule ligne dans la 2ème colonne.
Merci d'avance.

[valaendra]

Bonjour,

Tu peux réaliser cela avec Javascript.

Un petit exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="#" onclick="document.getElementById('montexte').style.display='block';">Mon lien</a>
<div id="montexte" style="display:none;">Mon texte caché que j'affiche quand je clique sur le lien</div>

Après, s'il s'agit de charger du contenu provenant d'une base de données ou autre, il faut passer par ajax dont tu trouveras plein de super articles là : http://ajax.developpez.com/cours/

[ryohazuki100]

merci pour ton aide.
en effet lorsque je clique sur les liens, cela affiche bien la ligne texte.
Par contre les résultats se mettent à la suite les uns des autres.
Je souhaiterai que le texte caché du lien 2 remplace le texte du lien 1.

Je viens de trouver un exemple de ce que j'aimerais sauf que sur la partie droite cela est du texte et non des images comme sur le modèle : http://tympanus.net/TipsTricks/CSS3M...ect/index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p>
<a href="#" onclick="document.getElementById('id1').style.display='block';">Mon 1er lien</a>
</p>
<p>
<a href="#" onclick="document.getElementById('id2').style.display='block';">Mon 2ème lien</a>
</p>
<div id="id1" style="display:none;">1er texte caché que j'affiche quand je clique sur le 1er lien</div>
<div id="id2" style="display:none;">2ème texte caché que j'affiche quand je clique sur le 2ème lien</div>

[valaendra]

En te servant de ces éléments, tu as tout ce qu'il faut pour te créer une petite fonction Javascript qui fera le boulot

Quand clic sur un lien => cache toutes les div et n'affiche que celle désirée

Bon week end

[Pifon]

Une autre possibilité serait de faire ça asses facilement en css avec la pseudo class :hover qui permet d'afficher une div au survole d'un élément.
Avec float et transition il serait également possible de réalisé l'effet de "glissade" de gauche à droite.

[Auteur]

@ryohazuki100

c'est ce que l'on appelle un roll-over. Il y a effectivement la solution CSS ou javascript. Pour la solution javascript, il faut voir du côté des événements onmouseover et onmouseout.