Bravo c'est le bon choix !

 

Explications :

  1. Les images
  2. Les instructions Javascript
  3. Le source

  • Les images

La page index.html est composée de :
    • Une image de fond : rien à dire c'est du html.
    • Deux images qui semblent n'en faire qu'une :

      L'image im1.jpg s'affiche lorsque la souris est ailleurs.
      im1

      L'image im2.jpg s'affiche dès que la souris est dessus.
      im2



  • Les instructions Javascript

    • Les instructions qui permettent de détecter la souris sont : onmouseover et  onmouseout.
    Elles appellent les fonctions Javascript lightUp et dimDown qui selectionnent la source de l'image.

  • Le source


    •
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <meta name="description" content="un jeu javascript.">
      <title>wowc</title>
      <script language="Javascript">
    function lightUp() {
    document.images["homeButton"].src="im2.jpg";
    }
    function dimDown() {
    document.images["homeButton"].src="im1.jpg";
    }
      </script>
    </head>
    <body style="background-image: url(fond1.jpg);">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><br>
    <br>
    <br>
    <br>
    <a onmouseover="lightUp();" onmouseout="dimDown();">
    </a></p>
    <div style="margin-left: 40px;"><a
     onmouseover="lightUp();" onmouseout="dimDown();"><img
     src="im1.jpg" name="homeButton" usemap="#homeButtonMap"
     border="0" height="183" width="650"> <map
     name="homeButtonMap">
    <area shape="rect" coords="524,130,638,165"
     href="explications.html">
    </map>
    </a><br>
    </div>
    </body>
    </html>
     

Enfin voici la 1ere version plus compliquée avec 3 images.