Bonjour,  
 
Sur une page, je voudrais créer un menu à gauche. Et lorsqu'on survole les lien du menu, à droite doit apparaitre un texte ou une image, différents pour chaque lien. Puis lorsqu'on clique sur le lien du menu, on arrive sur une autre page. Il faut que pour chaque lien, le texte ou l'image qui apparait, apparaisse au même endroit.  
Si quelqu'un connait un script qui me permet de faire ça...
 
Merci.

Bonjour,  
 
Le survol d'un element html (le lien d'un menu dans ton cas) se fait grace a l'evenement javascript onMouseOver (litteralement, au passage de la souris). Il te faut donc relier cet evenement a une fonction javascript.
 
Dans cette fonction, tu dois recuperer l'element html que tu souhaite modifier, idealement un div. Il faut pour cela lui donner un id (par exemple <div id='adroite'></id> ) et le recuperer a l'aide de DOM, par exemple a l'aide d'un document.getElementById('adroite').
 
Il suffit ensuite de donner une valeur a la propriete innerHTML de l'element et de lui donner comme contenu du texte sous forme de chaine de caractere, qui peut tres bien etre une image si la valeur de la propriete que tu insere contient la balise html adequate dont l'attribut src pour la source de ton image.

Merci pour ta réponse.  
Les éléments qui s'affichent sur la droite apparaissent les uns à la suite des autres (pas en même temps bien sur).Or je voudrais qu'ils s'affichent à chaque fois en haut de la page, pour chaque lien survolé. Donc, par exemple que le div 2 vienne remplacer le div 1, et ainsi de suite.  
Exemple de ce que je veux faire : http://www.editions-heloisedormesson.com/auteurs.php  

Perso, je fais cela en css
http://meyerweb.com/eric/css/edge/popups/demo.html

Merci C'est tout à fait ça qu'il me fallait.

Tu peux toujours t'inspirer du code source de la page que tu cite, seule une (ou deux) fonctions javascript semblent utilisees pour cet affichage.
 

 
On repere ici deux evenements. onMouseOver (au passage de la souris) et onMouseOut (lorsque la souris quitte l'element), qui apellent une fonction javascript, MM_showHideLayers.
 
Tu peux t'inspirer du code de leur fonction mais normallement ce que je t'ai dis devrais suffir. Je ne comprend pas quel est exactement le probleme que tu rencontre (montrer ici une partie de ton code source serait peut-etre a ce titre une bonne idee).
 
Le contenu entier de la div est remplace lorsque le contenu de l'attribut innerHTML est modifie. Peut-etre que tu voulais dire que ce contenu ne disparait pas lorsque la souris ne pointe plus sur un lien. Pour cela, il te faut utiliser l'attribut onMouseOut et remplacer l'attribut innerHTML par une chaine de caractere vide (afin de faire disparaitre le contenu de la div).
 
Si "les elements apparaissent les uns a la suite des autres" comme tu le dis, c'est peut-etre parce que le contenu de ton attribut innerHTML n'est pas ecrase mais concatene avec le nouveau.

En fait, le contenu de la div disparait mais il n'est pas remplacé comme il le devrait.  
Je vais tester tout ça...
Est-ce possible d'utiliser ce script avec "wayfinder" de "Modx" ? Ce qui serait vraiment trop génial !

Voici le code que j'avais dans le head :
 
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
 
Ensuite, dans la page html :
 
<h4>Veuillez choisir une catégorie : </h4>
<br />
<div id="menucataloguegauche">
<a onmouseout="MM_showHideLayers('Layer1','','hide')" onmouseover="MM_showHideLayers('Layer1','','show')" href="#"> blabla1 </a>
<a onmouseout="MM_showHideLayers('Layer2','','hide')" onmouseover="MM_showHideLayers('Layer2','','show')" href="#"> blabla2 </a>
</div>
 
<div id="menucataloguedroite">
<div id="Layer1" style="visibility: hidden;">      
<ul><li> texte blabla1 </ul></li><br /></div>
 
<div id="Layer2" style="visibility: hidden;">
<ul><li> texte blabla2 </ul></li><br /></div>
</div>
 
Chercher l'(les) intru(s) ...

Sinon, pour le faire en css, c'est cool, ça marche !
Mais j'aimerai bien comprendre mon erreur en javascript...

Si j'ai bien compris, tu aimerais que ta premiere div soit entierement remplace par la deuxieme, emplacement compris. Dans ce cas, il ne vaut pas utilise l'attribut visibility (visible, hiden) mais l'attribut display (visible, none).
 
L'attribut visibility ne fait que masquer ton champ mais considere toujours son emplacement comme occupe alors que l'attribut display supprime egalement l'emplacement lorsqu'il a la valeur "none" (et on peut ensuite le faire reaparaitre comme avec l'attribut visibility en lui donnant la valeur visible).

Oui c'est ça que je veux faire.  
Je remplace dans les deux derniers div visibility par display et hidden par none. Mais ensuite ça ne marche toujours pas ... Je suppose qu'il faut aussi que je remplace quelque chose dans le script ?

En effet, cela ne fonctionne pas.
Toutes mes excuses, je t'ai induis en erreur.
En effet, visibility a bien pour valeur visible et hidden, mais display ne connait pas la valeur visible, il faut la remplacer par inline (pour que ce soit visible). Le none en revanche est correct.
 
Donc dans le code que tu as mentionne ci dessus, il suffit de remplacer toutes les occurences (y compris dans ls script) de visibility par display, toutes les occurences de hidden par none et toute (enfin la seule) occurence de visible par inline.
 
J'ai teste et ca fonctionne

C'est cool Merci, je vais modifier tout ça ...