Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
926 connectés 

  FORUM HardWare.fr
  Programmation
  iOS

  Problème survol d’une image

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème survol d’une image

n°2304156
abdoulayec​oumba
Posté le 03-08-2017 à 18:28:29  profilanswer
 

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 :
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <link rel="stylesheet" href="menu.css" />
  5.     </head>
  6.     <body>
  7. <a href=".php">Plan de developpement </a>.......<a href=".php">Administration</a>.......<a href=".php">Gestion </a>.......<a href="encadrement.php">Encadrement </a>
  8.  <div id= 'administration' >
  9.         <form  method='POST' action='administration.php'>                                               
  10.                    <input type="image" name = "organiser"  src ="/administration.png"/>
  11.             </form>
  12.       </div>       
  13. </body>
  14. </html>


 
menu.css

Code :
  1. #administration
  2.        {
  3.             width:243px;
  4.             height:175px;
  5.   margin-left:150px;
  6.   margin-top:160px;
  7.      float: left;
  8.    }
  9.  
  10. #administration : hover {
  11.         width:243px;
  12.             height:175px;
  13. background-image:url("bouton1.png" );
  14.                 }


 

mood
Publicité
Posté le 03-08-2017 à 18:28:29  profilanswer
 

n°2304158
MaybeEijOr​Not
but someone at least
Posté le 03-08-2017 à 20:35:33  profilanswer
 

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 :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>page de test</title>
  5.     <style type="text/css">
  6.      body {
  7.          margin: 0px 0px 0px 0px;
  8.          padding: 0px 0px 0px 0px;
  9.          width: 100%;
  10.      }
  11.      div.administration {
  12.          width: 300px;
  13.          height: 36px;
  14.          background-image: url('image-de-fond');
  15.          background-repeat: no-repeat;
  16.          background-position: center;
  17.      }
  18.      input.administration {
  19.          width: 299px;
  20.          height: 35px;
  21.          padding: 0px 0px 0px 0px;
  22.          background-color: rgba(255,255,255,0);
  23.          border-style: solid;
  24.          border-color: #000000;
  25.          border-width: 1px;
  26.          font-weight: bold;
  27.          font-size: 1em;
  28.      }
  29.      input.administration:hover {
  30.          background-image : url('image-de-superposition');
  31.          background-repeat: no-repeat;
  32.          background-position: center;
  33.          cursor: pointer;
  34.      }
  35.     </style>
  36. </head>
  37. <body>
  38.     <form>
  39.         <div class="administration"><input type="button" value="Cliquez-moi" class="administration"></div>
  40.     </form>
  41. </body>
  42. </html>


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


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

Aller à :
Ajouter une réponse
  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 phpProbleme fonction
Problème MFC en VBA (erreur -2147417848 (80010108) )Problème avec SUM et INNER JOIN
[VBA/HTML] insérer une image dans un mailProblème de logique (boucle infinie)
Problème de lecture de sonAgrandir une image au survol de la mignature: Problème
Plus de sujets relatifs à : Problème survol d’une image


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR