Bravo c'est le bon choix !

 

Explications :

  1. Les images
  2. Les instructions Javascript
  3. Le source
  4. C'est compliqué ?
  • Les images

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

      L'image a.jpg
      qui s'affiche lorsque la souris est ailleurs.
      L'image bouton.jpg
      qui possède un lien vers cette page
      L'image b.jpg
      qui s'affiche dès que la souris est dessus.

      En images ça donne ça :




  • 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>
      <script language="Javascript">
    function lightUp() {
    document.images["homeButton"].src="b.jpg";
    }
    function dimDown() {
    document.images["homeButton"].src="a.jpg";
    }
      </script>
      <title></title>
    </head>
    <body style="background-image: url(fond1.jpg);">
    <br>
    <br>
    <br>
    <br>
    <a onmouseover="lightUp();" onmouseout="dimDown();">
    </a>
    <div style="margin-left: 40px;">
    <a onmouseover="lightUp();" onmouseout="dimDown();"><img
     src="a.jpg" name="homeButton" border="0"
     height="182" width="524"></a><a
     href="explication.html"><img
     style="border: 0px solid ; width: 125px; height: 182px;" alt=""
     src="bouton.jpg"></a><br>
    </div>
    </body>
    </html>
  • C'est compliqué ?

  • Je reconnais que c'est compliqué parcequ'il faut éditer l'image, la couper en deux etc..
    On peut faire plus simple avec deux images seulement et une zone de lien.