Partage
  • Partager sur Facebook
  • Partager sur Twitter

[js] menu suvolé ....

    4 octobre 2006 à 19:42:25

    Bonjour, j'ai essayé de faire un script de survolement de bouton seulement sa marche pas voila le code:


    //index.php
    //crée par Zanorio
    //le 04/10/2006
    //derniere modification le 04/12/2006

    <html>
    <head>
    <title>Volcano Rock !!!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />

    <SCRIPT LANGUAGE="Javascript 1.1">
          function accueil() {
              document.images["homeButton"].src="images/accueil.png"
          }
           
          function accueil2() {
              document.images["homeButton"].src="images/accueil2.png"
          }
           
            function tarif() {
                document.images["homeButton"].src="images/tarif.png"
            }
           
            function tarif2() {
                document.images["homeButton"].src="images/tarif2.png"
            }
           
            function contact() {
                document.images["homeButton"].src="images/nous contacter.png"
            }
           
            function contact2() {
                document.images["homeButon"].src="images/contact.png"
            }
           
            function photos()
            {
                document.images["homeButton"].src="images/photos.png"
            }
           
            function photos2()
            {
                document.images["homeButton"].src="images/photos2.png"
            }
           
            </SCRIPT>
    </head>



            <div id="en_tete">
            </div>
           
        <div id="menu">
            
         <?php include("menu.php"); ?>
             </div>
           
           
            <div id="volcano">
            </div>



    </body>
    </html>



    //menu.php
    //crée par Zanorio
    //Le 04/10/2006
    //derniere modification le 04/12/2006


         
              <a href="index.php" onmouseOver="accueil();" onmouseOut="accueil2();"><img src="images/accueil.png" width="348" height="49" alt=""></a><a href="tarif.php" onmouseOver="tarif();" onmouseOut="tarif();"><img src="images/tarif.png" width="96" height="49" alt="";></a><a href="index.php" onmouseOver="contact();" onmouseOut="contact2();"><img src="images/nous contacter.png" width="247" height="49" alt=""></a><a href="index.php" onmouseOver="photos();" onmouseOut="photos2();"><img src="images/photos.png" width="333" height="49" alt=""></a>


    et voila le resultat obtenue: volcano
    • Partager sur Facebook
    • Partager sur Twitter
      4 octobre 2006 à 20:17:14

      "document.images["homeButton"]"
      homeButton est censé être l'attribut d'une des images.
      Donc pour le premier acceil, tu aurais du mettre
      <img src="images/tarif.png" width="96" height="49" alt="" id="homeButton">

      Mais tu as moyen de faire ça sans js, uniquement en css.
      Par exemple avec ton premier lien, ça donnerai:

      <a href="index.php" id="accueil"><span>Accueil</span></a>


      #accueil span
      {
        display: none;
      }
      #accueil
      {

        display: block;
        float: left;
        width: 348px;
        height: 49px;
        background-image: url('images/accueil.png');
      }
      #accueil:hover
      {
        background-image: url('images/accueil2.png');
      }


      ou quelque chose comme ça ...
      • Partager sur Facebook
      • Partager sur Twitter
        4 octobre 2006 à 20:20:37

        pourquoi au debut as-tu marké #accueil span il sert a quoi ?
        • Partager sur Facebook
        • Partager sur Twitter
          4 octobre 2006 à 20:28:19

          pour éffacer le contenu initial (avec display: none;)
          Ce contenu initial, contient un texte alternatif pour qu'il y ait un minimum de lecture (pour les moteurs de recherches qui savent pas lire des images :o).
          • Partager sur Facebook
          • Partager sur Twitter
            4 octobre 2006 à 20:41:50

            oui mais seulement comment on fait quand les menu sont des images car je vais pas ecrire sur des images deja ecrite
            • Partager sur Facebook
            • Partager sur Twitter

            [js] menu suvolé ....

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown