Image dynamique - rol-over javascript

Résolu
Bonjour,

Je souhaite sur mon site Internet mettre une liste des évenements.

Exemple texte des évenements
1er : Assemblé
2eme : Nage le matin
3eme : Soirée diplome
etc.

Je souhaite mettre une image de base à coté du texte.

Je souhaite que si je survole avec mon cursur le :
1er texte, mon image de base change et qu'on voit une image de l'évenement 1
2ème texte, mon image de base change et qu'on voit une image de l'évenement 2
3ème texte, mon image de base change et qu'on voit une image de l'évenement 3
etc.

et si je clique :
le 1er, le liens s'ouvre vers l'évenement
le 2eme, le liens s'ouvre vers l'évenement
le 3eme, le liens s'ouvre vers l'évenement

Qui peut m'aider ?

Merci d'avance
Configuration: Windows XP Internet Explorer 7.0

5 réponses

  1. Bonsoir,
    via le css et l'utilisation de classe tu pourras arriver à cette structure.
    Ex.:
    a.lien1 {
    display:block;
    width:[taille image]px;
    height:[taille image]px;
    background:url([lien image1-0]) 0 0 no-repeat;
    }
    a.lien1:hover {
    background:url([lien image1-1]) 0 0 no-repeat;
    }

    <a class="lien1" href="[lien]" title="[desciption courte]"></a>

    Est-ce que c'est bien ça que tu demandais ?

    Bonne soirée ! :D
    1. Merci beaucoup pour votre réponse

      J'ai trouvé sur Internet un site ou le system fonctionne, sauf je n'ai réussi à récuperer qu'un parti du language :

      <td width="46" height="46"><a href="#" onMouseOut="Cacher('1')" onMouseOver="positionCalqueDW('1', -65);Afficher('1')"><img src="images/1.gif" width="46" height="46" border="0"></a></td>

      <td width="46" height="46"><a href="#" onMouseOut="Cacher('2')" onMouseOver="positionCalqueDW('2', -65);Afficher('2')"><img src="images/2.gif" width="46" height="46" border="0"></a></td>

      <td width="46" height="46"><a href="#" onMouseOut="Cacher('3')" onMouseOver="positionCalqueDW('3', -65);Afficher('3')"><img src="/images/3.gif" width="46" height="46" border="0"></a></td>

      <td width="46" height="46"><a href="#" onMouseOut="Cacher('4')" onMouseOver="positionCalqueDW('4', -65);Afficher('4')"><img src="images/4.gif" width="46" height="46" border="0"></a></td>

      J'ai compris votre structure, mais je n'arrive pas à afficher l'image dans mon tableau.

      Amicalement

      Corina
      1. Ne pourrais-tu pas me donner un lien avec qui a le style de roll-over que tu souhaites ? Comme ça je pourrais plus facilement te répondre... merci !
        1. Bonjour

          Merci beaucoup pour votre aide mais j'ai trouvé la solution :

          <HEAD>
          <!-- changement image -->
          <SCRIPT language=JavaScript>
          function RestoreDefaultImage()
          {
          document.getElementById('image_ctx').src='images/lavie.jpg';
          }
          </SCRIPT>
          <!-- end changement image -->
          </head>

          <body>
          <a href="lien.html" onmouseover="document.getElementById('image_ctx').src='images/image.jpg';" onmouseout="RestoreDefaultImage();">description texte</a>
          </body>

          Amicalement
          1. Oui, ça marchera effectivement... mais ce n'est pas "la bonne manière"... celà veut dire que tu es dépendant du javascript.
            Tu pouvais faire pareil avec le css :
            <style type="text/css">
            a.lien:link, a.lien:visited { display:block; width:[taille voulue]; height:[taille voulue]; background:url(images/image.jpg) 0 0 no-repeat; }
            a.lien:hover, a.lien:active { background:url(images/lavie.jpg) 0 0 no-repeat; }
            </style>
            </head>

            <body>
            <a class="lien" href="lien.html">description texte</a>
            </body>

            de cette manière, même ceux qui on le javascript désactivé auront l'effet de roll-over !

            Bien sur, ce n'est juste qu'un choix... loin d'être obligatoire ! Mais quand même, plus de personne verront cet effet que par le javascript (pour info certaines entreprise désactivent le javascript sur les machines de leurs employé...).

            Bonne continuation ! ;)