Problème d'affichage d'image bouton

img {
 border-style: none;
}

Le fond du bouton, tu le met bien en fond. Mais plus besoins de <img>, tu peux très bien le mettre en fond du <li>
Tu définis la taille de tes boutons en dur, dans le css, pour qu'ils restent tjr à la taille de leur fond quel que soit leur contenu
En contenu dans <li>, tu peux y mettre un lien contenant que du texte, sans nouvelle image à créer. Sauf si tu veux du texte spécial (police pas standarde), quoi qu'il y aie d'autre moyens pour ça (hors sujet).

li.BoutonMenu{ 
background : url(../image/Bouton/BoutonMenu.png) no-repeat; 
width:105px; 
height:32px; 
} 
li.BoutonMenu:hover{ 
background : url(../image/Bouton/BoutonMenu_Hover.png) no-repeat; 
}
li.BoutonMenu_Selected{ 
background : url(../image/Bouton/BoutonMenu_Selected.png) no-repeat; 
width:105px; 
height:32px; 
}

<div id="menu"> 
  <ul> 
    // On défini les valeurs statiques des boutons
    $Boutons = [
      ["Accueil", "Actualités de l'entreprise", "index.php"]
      ["foo", "blablabla", "foo.php"]
      ["bar", "patati", "bar.php"]
    ]
    $path = $_SERVER['REQUEST_URI']
 
    // Parcourir les boutons
    foreach($Boutons as $Bouton) {
      // <li class="xx">
      if ($path == "/".$Bouton[2]){ 
        echo "<li class='li.BoutonMenu_Selected'>" }
      else { 
        echo "<li class='li.BoutonMenu'>" }
      // <a href="xx" title="yy">zz</a>
      echo "<a href='".$Bouton[2]."' title='".$Bouton[1]."'>".$Bouton[0]."</a>"
      echo "</li>"
    }
  </ul>
</div>

a.bouton { width:105px; height:32px; display:inline-block; background:url(BoutonMenu.png) no-repeat; }
a.bouton:hover { background-image:url(BoutonMenu_Hover.png); }
a.bouton.selected { background-image:url(BoutonMenu_Selected.png); }

<a class='bouton' href='xxxx'>lien</a>
<a class='bouton selected' href='xxxx' >lien sélectionné</a>

jayme88 a dit :

Salut  

Millan a dit :

Je vois l'image et tout fonctionne mais j'ai un cadre blanc autour de l'image

Par defaut, les images ont une bordure. Définis la propriété Border de ces dernières dans le css:

img {
 border-style: none;
}

jayme88 a dit :

Salut  

Millan a dit :

Je vois l'image mais j'ai plus le cadre par contre je vois la description d'image devant:

Oui, c'est parce que ton image est vide, elle n'affiche rien.
Ce que tu fais toi, c'est définir le background de la balise <img>, mais tu ne lui donne pas de contenu. Dans ce cas, si l'image n'a pas de contenu (pas exemple un fichier non trouvé), il est normal d'afficher la valeur de alt.
Il est donc normal que seul une partie de l'image ne soit visible. Puisque elle est en fond, la balise (img dans notre cas) ne vas pas s'adapter à sa taille, mais à son contenu (alt). C'est pk ton image n'est visible que dans le cadre du contenu.
Ceci est le fonctionnement correct que j'aurais attendu, contrairement a ce qu'affiche Chrome.
Ce qui peut surprendre, c'est que FF n'affiche pas le cadre. Mais probablement celui ci n'affiche le cadre que si il y a un contenu (une image, autre que alt)

Donc, pour arranger ça, je te suggère:

Le fond du bouton, tu le met bien en fond. Mais plus besoins de <img>, tu peux très bien le mettre en fond du <li>
Tu définis la taille de tes boutons en dur, dans le css, pour qu'ils restent tjr à la taille de leur fond quel que soit leur contenu
En contenu dans <li>, tu peux y mettre un lien contenant que du texte, sans nouvelle image à créer. Sauf si tu veux du texte spécial (police pas standarde), quoi qu'il y aie d'autre moyens pour ça (hors sujet).

li.BoutonMenu{ 
background : url(../image/Bouton/BoutonMenu.png) no-repeat; 
width:105px; 
height:32px; 
} 
li.BoutonMenu:hover{ 
background : url(../image/Bouton/BoutonMenu_Hover.png) no-repeat; 
}
li.BoutonMenu_Selected{ 
background : url(../image/Bouton/BoutonMenu_Selected.png) no-repeat; 
width:105px; 
height:32px; 
}

<div id="menu"> 
  <ul> 
    // On défini les valeurs statiques des boutons
    $Boutons = [
      ["Accueil", "Actualités de l'entreprise", "index.php"]
      ["foo", "blablabla", "foo.php"]
      ["bar", "patati", "bar.php"]
    ]
    $path = $_SERVER['REQUEST_URI']
 
    // Parcourir les boutons
    foreach($Boutons as $Bouton) {
      // <li class="xx">
      if ($path == "/".$Bouton[2]){ 
        echo "<li class='li.BoutonMenu_Selected'>" }
      else { 
        echo "<li class='li.BoutonMenu'>" }
      // <a href="xx" title="yy">zz</a>
      echo "<a href='".$Bouton[2]."' title='".$Bouton[1]."'>".$Bouton[0]."</a>"
      echo "</li>"
    }
  </ul>
</div>

Attention, pas testé, et ça fait un moment que j'ai plus fais de php.
Et fauda jouer sur qq règles css en plus

a+

a.bouton { width:105px; height:32px; display:inline-block; background:url(BoutonMenu.png) no-repeat; }
a.bouton:hover { background-image:url(BoutonMenu_Hover.png); }
a.bouton.selected { background-image:url(BoutonMenu_Selected.png); }

<a class='bouton' href='xxxx'>lien</a>
<a class='bouton selected' href='xxxx' >lien sélectionné</a>

<a class='bouton' href='xxxx'>lien</a>
<a class='bouton selected' href='xxxx' >lien sélectionné</a>

<a href="index.php" title="Actualités de l'entreprise">
				<?php 
				//On est sur la page index.php l'image sera button1-1.png
				if($_SERVER['REQUEST_URI']=="/index.php"){ 
				$image = "Bouton-Accueil1_1"; 
				} 
				//On est autre part, l'image sera button1.gif
				else{ 
				$image = "Bouton-Accueil1";
				} 
				//la class Bouton-Accueil1 fait basculer l'état de l'image
				//Si on est sur la page index.php l'image button1-1.gif reste Bouton-Accueil1_1
				//Si on est autre part, l'image bascule d'un état à l'autre
				echo '<img href="'.$image.'" class="'.$image.'" alt="image bouton accueil" />';
				?>
				</a>

<!DOCTYPE html>

 
<?php

    // Définition des boutons / pages

    $pages = Array(

        "accueil" => Array("Accueil", "Actualités de l'entreprise"),

        "foo" => Array("foo", "blablabla"),

        "bar" => Array("bar", "patati")

    );

 
    // Tester la page demandé, afficher l'accueil si la page est inconnue

    $page = "";

    if (isset($_GET["page"])) $page = $_GET["page"];

    if (!isset($pages[$page])) $page = "accueil";

 
?>

 
 
<html>

    <head>

	<title><?php echo $pages[$page][0] ?></title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style type="text/css">

 
            a.buton {

                display: inline-block;

                background-image: url("<a href="http://www.baybul.com/clipart/buton/buton-3.png" rel="nofollow" target="_blank">http://www.baybul.com/clipart/buton/buton-3.png</a>");

                width: 406px; height: 218px;

                font-size: 30px;

                text-align: center;

                padding-top: 188px

            }

            a.buton:hover {

                background-image: url("<a href="http://www.baybul.com/clipart/buton/buton-2.png" rel="nofollow" target="_blank">http://www.baybul.com/clipart/buton/buton-2.png</a>")

            }

            a.buton.selected {

                background-image: url("<a href="http://www.baybul.com/clipart/buton/buton-5.png" rel="nofollow" target="_blank">http://www.baybul.com/clipart/buton/buton-5.png</a>")

            }

 
        </style>

    </head>

    <body>

        <div>

            <?php

            foreach($pages as $key => $value) {

                $class = 'class = "buton';

                if ($page == $key) $class .= ' selected'; $class .= '"';

                echo '<a '.$class.' href="?page='.$key.'" title="'.$value[1].'">'.$value[0].'</a>';

            }

            ?>

        </div>

    </body>

</html>