iOS

Problème survol d’une image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème survol d’une image

abdoulayecoumba

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" );
}

Publicité

MaybeEijOrNot

but someone at least

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.

FORUM HardWare.fr

Programmation

iOS

Problème survol d’une image

Sujets relatifs
Problème requete MSSQLSERVER_4104	[Résolu] Problème Concaténation
probleme foreach php	Probleme fonction
Problème MFC en VBA (erreur -2147417848 (80010108) )	Problème avec SUM et INNER JOIN
[VBA/HTML] insérer une image dans un mail	Problème de lecture de son
Agrandir une image au survol de la mignature: Problème
Plus de sujets relatifs à : Problème survol d’une image

Page générée en 0.045 secondes