11486 sujets

JavaScript, DOM et API Web HTML5

Faire apparaître une image dans une autre div au survole d'un lien

Bonjour à tous,

Je suis vraiment novice, alors pardonnez-moi si ce que je vais vous demander vous semble évident. Voilà mon problème : J'aimerais créer un menu comme sur le schéma ci-joint.
upload/38138-schema.jpg

Ce n'est pas un menu principal, mais seulement un menu à l'intérieur d'une page de mon site. Ce que j'aimerais, c'est qu'il y ait une image dès l'apparition de ce menu (image0 je l'appelle), et que quand on passe la souris sur les liens à droite (qui nous amènent à la page concernée), l'image qui correspond à ce lien apparaît à gauche.

Je me suis inspiré de ce post : http://forum.alsacreations.com/topic-4-48919-1-Resolu-Afficher-une-image-en-survolant-un-mot-dans-un-autre-div.html

et voilà ce que ça donne :

<body>
<div id="boite">		
  <div id="image_boite">
        <img  id="image" src="image0.jpg"/>
        </div>
                
<div id="liens">
        <ul>
          <li><a href="page du lien 1.html" onmouseover"document.getElementById('image').src = "image1.jpg";" alt="">Lien 1</a></li>
          <li><a href="page du lien 2.html" onmouseover"document.getElementById('image').src="image2.jpg".style.display='block';" alt="">Lien 2</a></li>
          <li><a href="page du lien 3.html" onmouseover"document.getElementById('image').src="image3.jpg".style.display='block';" alt="">Lien 3</a></li>
  </ul>
  </div>
    
  </div>
  
  
   </body>


et le CSS

#boite {
	height: 480px;
	width: 640px;
	position: relative;
}

#liens {
	float: right;
	height: 480px;
	width: 160px;
	position:absolute;
}

#image_boite {
	height: 480px;
	width: 480px;
	float: left;
	position:absolute;
}



J'ai tout fait comme dans le post, mais cela ne fonctionne pas, alors je vous le demande : Qu'est-ce qu'il manque?

Merci d'avance
Bonjour,
Il faut revoir ton code HTML, car il a des erreurs. Fais particulièrement attention à l'emploi des guillemets et des apostrophes!
<div id="liens">
  <ul>
    <li><a href="page_du_lien_1.html" onmouseover="document.getElementById('image').src = 'image1.jpg'">Lien 1</a></li>
    <li><a href="page_du_lien_2.html" onmouseover="document.getElementById('image').src = 'image2.jpg'">Lien 2</a></li>
    <li><a href="page_du_lien_3.html" onmouseover="document.getElementById('image').src = 'image3.jpg'">Lien 3</a></li>
  </ul>
</div>


Ceci modifie l'image en fonction du lien survolé.
Pour ce qui relève du CSS, à toi de voir ce que tu veux faire exactement, mais tu devrais t'intéresser un peu au "positionnement".
Modifié par lddsoft (05 Jun 2011 - 16:52)
Pour te donner quelque chose de plus complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>
      menu
    </title>
    <style type="text/css">
/*<![CDATA[*/
    #conteneur {
        background: navy;
        width:645px;
        height:488px;
        border: 2px solid blue;
        margin: 0 auto;
    }
    #image_boite {
        margin-top: 4px;
        margin-left: 4px;
        height: 480px;
        width: 480px;
        float: left;
    }
    #liens {
        float: left;
        width: 160px;
        font: bold 16px arial,verdana,helvetica,sans-serif;
    }
    #liens ul {
        list-style:none;
        width: 160px;
        margin: 0;
        padding: 0;
	}
   #liens ul li {
        height: 65px;
        border: 1px solid blue;
        margin-left: 4px;
        text-align: center;
        padding-top: 55px;
        background: #AAAAFF;
      }
    #liens ul li:hover {background:#0000D2;border: 1px solid #fff;}
    #liens a:link {text-decoration:none;color:#fff;}
    #liens a:hover {color:#AAAAFF;}
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="conteneur">
        <div id="image_boite">
          <img id="image" src="image0.jpg" alt="image0" />
        </div>
        <div id="liens">
          <ul>
            <li>
              <a href="page_du_lien_0.html" onmouseover=
              "document.getElementById('image').src = 'image0.jpg'">Lien 0</a>
            </li>
            <li>
              <a href="page_du_lien_1.html" onmouseover=
              "document.getElementById('image').src = 'image1.jpg'">Lien 1</a>
            </li>
            <li>
              <a href="page_du_lien_2.html" onmouseover=
              "document.getElementById('image').src = 'image2.jpg'">Lien 2</a>
            </li>
            <li>
              <a href="page_du_lien_3.html" onmouseover=
              "document.getElementById('image').src = 'image3.jpg'">Lien 3</a>
            </li>
          </ul>
        </div>
    </div>
  </body>
</html>

N.B.: il vaut mieux de ne pas laisser d'espaces dans les noms de fichiers! Cela peut provoquer des problèmes.
Modifié par lddsoft (05 Jun 2011 - 17:48)
Super! Ça marche! Tout ça à cause des guillemets...Merci beaucoup!

Par contre, je me suis aperçu d'un truc, j'aimerais que l'image qui apparaît, disparaisse quand on enlève la souris dessus.

Est-ce que ça a un rapport avec onmouseout ou un truc du genre? Aurais-tu une idée?

Une fois que j'aurais fini mon menu, je l'enverrai pour le montrer, mais il faut que je fasse les dessins et tout avant.
alberio974 a écrit :
Par contre, je me suis aperçu d'un truc, j'aimerais que l'image qui apparaît, disparaisse quand on enlève la souris dessus.

Il y a 3 possiblités:
- soit tu survoles un autre lien et l'image change,
- soit tu cliques sur le lien et la cible du lien cliqué s'ouvre,
- soit la souris quitte le lien sans avoir cliqué.

C'est le 3e cas qui nous intéresse, je suppose...
Que veux-tu qu'il se produise lorsque la souris quitte le lien? Mettre l'image0 ? Ou ...
Si c'est mettre l'image0, il suffit d'ajouter au lien 1, 2 et 3 ceci :
 onmouseout="document.getElementById('image').src = 'image0.jpg'"

Modifié par lddsoft (05 Jun 2011 - 20:39)
C'est parfait! Ça marche impécable!
Merci encore pour ton aide, j'ai hâte de te montrer le résultat final.
Je vais essayer de m'y atteler bientôt!
à la prochaine!
fvsch! Comment i lé? Eh oui, on ne renit pas ses origines, même quand on est loin.

Merci pour les liens que tu m'as donnés, le premier est vraiment très intéressant et le deuxième, je vais peut-être m'en servir un jour.

Artemus24, tu devrais peut-être ouvrir un nouveau sujet en effet, parce qu'il est un peu différent du mien.

Ça ne fait pas longtemps que j'ai découvert ce forum et j'apprécis grandement l'aide que tout le monde m'a apporté. Merci à vous tous!
Bonjour à toutes et à tous,

je viens d'ouvrir un nouveau sujet. Je pensais qu'il était similaire au votre car moi aussi, j'utilise un 'onmouseover' et un 'onmouseout'.

Désolé de cette perturbation.

@+
Artemus24 a écrit :
Je pensais qu'il était similaire au votre car moi aussi, j'utilise un 'onmouseover' et un 'onmouseout'.

Simple pratique de ce forum: on ne regroupe pas les problèmes similaires dans un même sujet. Un problème = un sujet, ça évite de discuter en parallèle de deux problèmes qui ont chacun leurs spécificités, de déterrer des problèmes résolus et d'avoir des membres qui répondent au problème de départ plutôt qu'au dernier problème exposé dans le sujet, etc.
Sujet clos
Aller à