Problème survol d’une image

Marsh Posté le 03-08-2017 à 18:28:29

Bonjour, j’ai créé une page « menu.php » avec une image à l’intérieure de celle-ci, je voudrais faire en sorte que lorsqu’on clique sur l’image cela te permet d’atteindre une page nommée « administration .php ». La page « menu.php » fait appelle à un fichier CSS nommé « menu.css » qui gère tous ses aspects graphiques jusque-là tout marche nickel, la page menu.php s’affiche correctement avec l’image (administration.png) qui possédé toutes ses fonctionnalités.
Maintenant, je voudrais mette une deuxième image (bouton.png) derrière la première de sorte que cette deuxième image puisse apparaitre lorsqu’on survol la première avec la souris mais je n’y parviens pas voici mon code

menu.php

Code :

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu.css" />
</head>
<body>
<a href=".php">Plan de developpement </a>.......<a href=".php">Administration</a>.......<a href=".php">Gestion </a>.......<a href="encadrement.php">Encadrement </a>
<div id= 'administration' >
<form method='POST' action='administration.php'>
<input type="image" name = "organiser" src ="/administration.png"/>
</form>
</div>
</body>
</html>

menu.css

Code :

#administration
{
width:243px;
height:175px;
margin-left:150px;
margin-top:160px;
float: left;
}
#administration : hover {
width:243px;
height:175px;
background-image:url("bouton1.png" );
}

Reply

Marsh Posté le 03-08-2017 à 18:28:29

Reply

Marsh Posté le 03-08-2017 à 20:35:33

Bonjour,

Tu ne peux pas comme ça, il faut bien t'imaginer que la structure que tu construis c'est comme une pile de feuilles. Ton bouton image vient recouvrir ton élément div, tout comme si tu ajoutais une feuille au-dessus d'une pile et donc cache ce qu'il y a derrière.
En CSS il y a moyen de tricher pour finalement faire en sorte de placer ta feuille en-dessous au lieu d'en-dessus, malheureusement ce changement est plus que graphique, ton bouton sera derrière le div et donc ne sera plus cliquable.

Il y a néanmoins plusieurs solutions à ton problème.

En css un truc du genre :

Code :

<!DOCTYPE html>
<html>
<head>
    <title>page de test</title>
    <style type="text/css">
      body {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          width: 100%;
      }
      div.administration {
          width: 300px;
          height: 36px;
          background-image: url('image-de-fond');
          background-repeat: no-repeat;
          background-position: center;
      }
      input.administration {
          width: 299px;
          height: 35px;
          padding: 0px 0px 0px 0px;
          background-color: rgba(255,255,255,0);
          border-style: solid;
          border-color: #000000;
          border-width: 1px;
          font-weight: bold;
          font-size: 1em;
      }
      input.administration:hover {
          background-image : url('image-de-superposition');
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
      }
    </style>
</head>
<body>
    <form>
        <div class="administration"><input type="button" value="Cliquez-moi" class="administration"></div>
    </form>
</body>
</html>

En Javascript, un onmouseover et on n'en parle plus...

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

Problème survol d’une image

Sujets relatifs:

Leave a Replay