Sujet Précédent Sujet Suivant

Bouton de la barre menu

Fermé
01Millan01 Messages postés 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 - 24 avril 2012 à 17:10
Autumn`Tears Messages postés 1054 Date d'inscription samedi 14 mars 2009 Statut Membre Dernière intervention 23 octobre 2013 - 17 mai 2012 à 11:34
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 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
5 mai 2012 à 12:07 
<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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
5 mai 2012 à 13:33
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 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
5 mai 2012 à 13:43
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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
5 mai 2012 à 13:47
Ok merci je vais test ça tout de suite
0
01Millan01 Messages postés 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
5 mai 2012 à 13:55
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 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
5 mai 2012 à 14:12
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
24 avril 2012 à 19:31
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 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
25 avril 2012 à 09:54
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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
26 avril 2012 à 14:38
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 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
26 avril 2012 à 14:54
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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
27 avril 2012 à 08:50
Salut, et merci.

Et je doit rajouter ça ou ?
0
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
27 avril 2012 à 10:42
//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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
29 avril 2012 à 16:13
Merci je vais testé ça, je vous tiens au courant si mon problème est résolu
0
01Millan01 Messages postés 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
5 mai 2012 à 11:46
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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
6 mai 2012 à 14:51
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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
Modifié par 01Millan01 le 12/05/2012 à 17:39
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 112 Date d'inscription dimanche 15 mars 2009 Statut Membre Dernière intervention 13 janvier 2016 1
Modifié par 01Millan01 le 14/05/2012 à 10:57
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 1054 Date d'inscription samedi 14 mars 2009 Statut Membre Dernière intervention 23 octobre 2013 144
17 mai 2012 à 11:34
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
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
les entrées et les sortées
oussman -
MarsuGL -

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

12 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse