Bouton de la barre menu

01Millan01 Messages postés 120 Statut Membre -  
Autumn`Tears Messages postés 1247 Statut Membre -
Bonjour,

J'aimerais faire en sorte que les boutons de mon site change d'apparence quand on met sa souris dessus et qu'il reste dans cette apparence si je suis sur la page en question.

Je travail en php et css

Donc par exemple si j'ai mon bouton accueil qui passe en bleu quand je passe ma souris dessus, j'aimerais pouvoir faire en sorte que le bouton reste bleu temps que je suis sur la page acceuil.

J'arrive pas à trouvé comment faire en français.

Donc j'ai mon fichier header dans le quelle j'ai mon menu, un pote ma aidé pour faire en sorte déjà qu'il change de couleur, et voila ce qui a maintenant mais j'avoue que je sais pas trop à quoi correspond tout les éléments;

<?php
if ($_POST['test']=='lol')
{
$a=1;
}else if ($_POST['test']=='reset')
{
$a=0;
}else
{
$a=7;
}

$b='src="image/Bouton/button1-1.gif"';
$c="src=\"image/Bouton/button1.gif\" onmouseover=\"this.src = 'image/Bouton/button1-1.gif';\" onmouseout=\"this.src = 'image/Bouton/button1.gif';\"";
?>


<div id="menu">
<ul>
<li><a href="index.php" title="Actualités de l'entreprise"><img <?php if(ISSET($a)){if ($a==1){echo $b;}else{echo $c;}}else{echo $c;} ?> alt="Actualités de l'entreprise"/></a></li>
</ul>
</div>


Merci de votre attention

7 réponses

Réponse 1 / 7
tryan44 Messages postés 1381 Statut Membre 220
  
<style>
/*image normal*/
.hover a{
background : url('button1.gif') no-repeat;
}
/*image hover*/
.hover a:hover{
background : url('button1-1.gif') no-repeat;
}
</style>
<a href="index.php" title="Actualités de l'entreprise">
<?php 
//On est sur la page index.php l'image sera button1-1.gif
if($_SERVER['REQUEST_URI']=="/index.php"){ 
$image = "button1-1.gif"; 
} 
//On est autre part, l'image sera button1.gif
else{ 
$image = "button1.gif"; 
} 
//la class hover fait basculer l'état de l'image
//Si on est sur la page index.php l'image button1-1.gif reste fixe
//Si on est autre part, l'image bascule d'un état à l'autre
echo '<img class="hover" src="'.$image.'" alt="Mon image" />';
?>
</a>
1
01Millan01 Messages postés 120 Statut Membre 1
 
Merci, donc je doit mettre ça ou ?

Fichier CSS:
<style>
/*image normal*/
.hover a{
background : url('button1.gif') no-repeat;
}
/*image hover*/
.hover a:hover{
background : url('button1-1.gif') no-repeat;
}
</style>

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

Et je doit supprime quelque chose dans ce qui existe déjà ?
0
tryan44 Messages postés 1381 Statut Membre 220
 
Le CSS dans un fichier de style ou entre les balises style de votre document et le reste à l'endroit de votre bouton.
0
01Millan01 Messages postés 120 Statut Membre 1
 
Ok merci je vais test ça tout de suite
0
01Millan01 Messages postés 120 Statut Membre 1
 
re,

alors j'ai test mais ça fonctionne pas je pense que c'est à cause du fichier css, je doit pas mettre "#" à la place des "." pour ls style ?

/*image normal*/
#hover a{
background : url('button1.gif') no-repeat;
}
/*image hover*/
#hover a:hover{
background : url('button1-1.gif') no-repeat;
}
0
tryan44 Messages postés 1381 Statut Membre 220
 
Voici un teste que je viens de faire et qui fonctionne :

Dans votre feuille de style : 
/*image normal*/
.fixe{
background : url('button1-1.gif ') no-repeat;
width:20px;
height:20px;
}
/*image hover*/
.hover{
background : url('button1.gif ') no-repeat;
width:20px;
height:20px;
}
.hover:hover{
background : url('button1-1.gif ') no-repeat;
}


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


Dans cet exemple, on agit directement sur la class de l'image. Adaptez les dimensions width et height à vos images.
0
Réponse 2 / 7
Atrer
 
Bonjour,
C'est simple utilisez une image différente pour le bouton concerné sur la page en question. Pas besoin de code. Par contre quel est l'intérêt d'avoir un bouton pour se rendre sur une page où l'on est déjà?
0
Réponse 3 / 7
AssassinTourist Messages postés 7838 Statut Contributeur 1 312
 
Bonjour,

Je n'ai pas tout compris. Vous voulez que si jamais on clique sur accueil et qu'on est sur accueil, le bouton soit bleu, c'est ça ? Ou sinon, le bouton est normal, et si vous passez la souris sur le bouton ET (ou ?) qu'on ait sur la page d'accueil, ça devienne bleu ?
0
Réponse 4 / 7
01Millan01 Messages postés 120 Statut Membre 1
 
Bonjour,

Enfaite j'aimerais que quand on passe sa souris dessus sa prenne l'image 2, et que quand je suis sur la page concerné que l'image 2 reste activé.
0
tryan44 Messages postés 1381 Statut Membre 220
 
Salut,

Dans les grosses lignes : 
<?php
if($_SERVER['REQUEST_URI']=="/mapage.php"){
$image = "mon-image-bleu.png";
}
else{
$image = "mon-image.png";
}
echo $image;
?>
0
01Millan01 Messages postés 120 Statut Membre 1
 
Salut, et merci.

Et je doit rajouter ça ou ?
0
AssassinTourist Messages postés 7838 Statut Contributeur 1 312
 
//où tu veux
<?php
if($_SERVER['REQUEST_URI']=="/mapage.php"){
$image = "mon-image-bleu.png";
}
else{
$image = "mon-image.png";
}
?>

//à l'endroit ton image
<img src="<?php echo $image ?>" alt="" title="" />
0
01Millan01 Messages postés 120 Statut Membre 1
 
Merci je vais testé ça, je vous tiens au courant si mon problème est résolu
0
01Millan01 Messages postés 120 Statut Membre 1
 
J'ai test et ça fonctionne pas mais j'ai peu être fais une erreur dedans :

<body>
<div id="header">
</div>
<div id="container">

<?php
if ($_POST['test']=='lol')
{
$a=1;
}else if ($_POST['test']=='reset')
{
$a=0;
}else
{
$a=7;
}

$b='src="image/Bouton/button1-1.gif"';
$c="src=\"image/Bouton/button1.gif\" onmouseover=\"this.src = 'image/Bouton/button1-1.gif';\" onmouseout=\"this.src = 'image/Bouton/button1.gif';\"";

if($_SERVER['REQUEST_URI']=="/index.php"){
$image = "button1-1.gif";
}
else{
$image = "button1.gif";
}
?>


<div id="content">

<div id="menu">
<ul>
<li><a href="index.php" title="Actualités de l'entreprise"><img src="<?php echo $image ?>" <?php if(ISSET($a)){if ($a==1){echo $b;}else{echo $c;}}else{echo $c;} ?> alt="Actualités de l'entreprise"/></a></li>
...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
01Millan01 Messages postés 120 Statut Membre 1
 
Re bonjour, y a aussi un problème au niv de la description de l'image (dans le code en haut il est écrit "mon image") et ben je vois "mon image" écrit devant l'image du bouton

alors j'ai teste avec un autre bouton et ça me fais la même chose... Peu être un problème de format d'image ou quoi...

Alors sur chrome je vois juste mon bouton entouré d'un cadre blanc :
J'ai fais un print screen pour que vous puissiez avoir une meilleur idée de mon nouveau probl:
http://img15.hostingpics.net/pics/167493prblsite.png

Et sur firefox je vois la description de l'image avant le bouton:
http://img15.hostingpics.net/pics/138581prblsite1.png
0
Réponse 6 / 7
01Millan01 Messages postés 120 Statut Membre 1
 
Up, svpl je continue à chercher j'ai demandé autour de moi et on sait pas me dire pourquoi... Je suppose qu'il doit y avoir un cadre ou une fonction dans le css qui provoque ça, mais je m'y connais pas trop dans tout ça...

Fichier CSS: 
/*Bouton Accueil*/ 
/*image normal*/ 
.Bouton-Accueil1_1{ 
background : url(../image/Bouton/Bouton-Accueil1_1.png) no-repeat; 
width:105px; 
height:32px; 

} 
/*image hover*/ 
.Bouton-Accueil1{ 
background : url(../image/Bouton/Bouton-Accueil1.png) no-repeat; 
width:105px; 
height:32px; 
} 
.Bouton-Accueil1:hover{ 
background : url(../image/Bouton/Bouton-Accueil1_1.png) no-repeat; 

} 

  /*Bouton filial*/ 
/*image normal*/ 
.Bouton-filiale1_1{ 
background : url(../image/Bouton/Bouton-filiale1_1.png) no-repeat; 
width:105px; 
height:32px; 
border-radius: 10px 10px 10px 10px; 
} 
/*image hover*/ 
.Bouton-filiale1{ 
background : url(../image/Bouton/Bouton-filiale1.png) no-repeat; 
width:105px; 
height:32px; 
border-radius: 10px 10px 10px 10px; 
} 
.Bouton-filiale1:hover{ 
background : url(../image/Bouton/Bouton-filiale1_1.png) no-repeat; 
border-radius: 10px 10px 10px 10px; 
}


Header: 
<div id="menu"> 
  <ul> 
   <li> 
    <a href="index.php" title="Actualités de l'entreprise"> 
    <?php  
    //On est sur la page index.php l'image sera button1-1.gif 
    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 class="'.$image.'" alt="image bouton accueil" />'; 
    ?> 
    </a> 
   </li> 
   <li><a href="filial.php" title="Nos partenaire"> 
    <?php  
    if($_SERVER['REQUEST_URI']=="/filial.php"){  
    $image = "Bouton-filiale1_1";  
    }  
    else{  
    $image = "Bouton-filiale1";  
    }  
    echo '<img class="'.$image.'" alt="Liste de nos partenaire" />'; 
    ?> 
    </a> 
   </li> 
   <li><a href="produits.php" title="Nos produits"> 
    <?php  
    if($_SERVER['REQUEST_URI']=="/produits.php"){  
    $image = "Bouton-produit1_1";  
    }  
    else{  
    $image = "Bouton-produit1";  
    }  
    echo '<img class="'.$image.'" alt="Nos produits" />'; 
    ?> 
    </a> 
   </li> 
   <li><a href="documentation.php" title="Documentation sur l'entreprise"> 
    <?php  
    if($_SERVER['REQUEST_URI']=="/documentation.php"){  
    $image = "Bouton-documentation1_1";  
    }  
    else{  
    $image = "Bouton-documentation1";  
    }  
    echo '<img class="'.$image.'" alt="Information concernant l entreprise" />'; 
    ?> 
    </a> 
   </li> 
   <li><a href="contact.php" title="Nous contacter"> 
    <?php  
    if($_SERVER['REQUEST_URI']=="/contact.php"){  
    $image = "Bouton-contact1_1";  
    }  
    else{  
    $image = "Bouton-contact1";  
    }  
    echo '<img class="'.$image.'" alt="Pour prendre contacte avec notre entreprise" />'; 
    ?> 
    </a> 
   </li> 
   <li><a href="inscription.php" title="Inscription sur notre site"> 
    <?php  
    if($_SERVER['REQUEST_URI']=="/inscription.php"){  
    $image = "Bouton-inscription1_1";  
    }  
    else{  
    $image = "Bouton-inscription1";  
    }  
    echo '<img class="'.$image.'" alt="Pour s incrire sur notre site" />'; 
    ?> 
    </a></li> 
  </ul> 
 </div>
0
Réponse 7 / 7
01Millan01 Messages postés 120 Statut Membre 1
 
Pour ceux à qui sa aiderais de voir le site pour voir d'ou vient le problème:

https://www.000webhost.com/migrate?static=true

Et j'ai constaté que sur internet explorer c'est encore pire, on dirait qu'il fais comme si il trouve pas l'image.

Vous êtes sur que c'est bien au norme w3c ?
0
Autumn`Tears Messages postés 1247 Statut Membre 145
 
En fait, c'est img src= et non pas img href=
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
O barré horizontalement
JCB40 -
JCB40 -

3 réponses
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses