[PHP-JS] Ancre html # avec PHP [Résolu]

[manuphi]

Bonjour,
je cherche à attribuer un id="active_menu" sur des ancres html placées dans un container.
Comme mes explications ne sont peut-être pas très claires, voici le lien pour visualiser :
http://tourvivante.manuphi.fr/index.php
Il s'agit du menu avec les petits carrés verts en bas.
Avec id="active_menu", le petit carré doit être vert.
Sans id="active_menu", le petit carré doit être transparent.

Pour mieux comprendre encore voici le code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<div id="carre">
<?php
$chemin='/';
$page1='index.php';
$page2='index.php#img2';
$page3='index.php#img3';
$page4='index.php#img4';
$page5='index.php#img5';
$page6='index.php#img6';
$page7='index.php#img7';
$page8='index.php#img8';
$page9='index.php#img9';
$ancre='<script language="javascript1.2">document.write(window.location.hash);</script>';
?>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page1) echo'id="active_menu" href="'.$page1.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page2) echo'id="active_menu" href="'.$page2.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page3) echo'id="active_menu" href="'.$page3.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page4) echo'id="active_menu" href="'.$page4.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page5) echo'id="active_menu" href="'.$page5.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page6) echo'id="active_menu" href="'.$page6.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page7) echo'id="active_menu" href="'.$page7.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page8) echo'id="active_menu" href="'.$page8.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_SERVER['PHP_SELF'].$ancre=$chemin.$page9) echo'id="active_menu" href="'.$page9.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
  </div>

Là tous les carrés sont verts alors qu'il ne devrait y avoir qu'un carré vert et les autres transparents.
Comme vous l'aurez compris, je suis pas loin d'être nul en php ...
Merci de vos idées et explications détaillées.

[sharrascript]

bonsoir,

j'ai pas regardé le code, mais dans un premier temps ce qui me frappe c'est tes condition if qui n'en sont pas...

Code :

if($_SERVER['PHP_SELF'].$ancre=$chemin.$page4)

Les conditions c'est le double égale:

Code :

if($_SERVER['PHP_SELF'].$ancre==$chemin.$page4)

++

P.S.: si tu code en VB ça arrive souvent, je me suis fait piéger longtemps^^

[manuphi]

Merci sharrascript

Mais alors là ya plus rien qui fonctionne !

[sharrascript]

en lisant ton code, je m'apperçois que c'est normale que cela ne marche pas, voici la solution:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="carre">
<?php
$chemin='/';
$page1='index.php';
$page2='index.php?img=img2#img2';
$page3='index.php?img=img3#img3';
$page4='index.php?img=img4#img4';
$page5='index.php?img=img5#img5';
$page6='index.php?img=img9#img6';
$page7='index.php?img=img7#img7';
$page8='index.php?img=img8#img8';
$page9='index.php?img=img9#img9';
$ancre = $_SERVER["PHP_SELF"].'?img=';
?>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page1) echo'id="active_menu" href="'.$page1.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page2) echo'id="active_menu" href="'.$page2.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page3) echo'id="active_menu" href="'.$page3.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page4) echo'id="active_menu" href="'.$page4.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page5) echo'id="active_menu" href="'.$page5.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page6) echo'id="active_menu" href="'.$page6.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page7) echo'id="active_menu" href="'.$page7.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page8) echo'id="active_menu" href="'.$page8.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($ancre.$_GET['img'].'#'.$_GET['img']==$chemin.$page9) echo'id="active_menu" href="'.$page9.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
  </div>

Y a plus simple, mais normalement c'est le résultat recherché...

++

[Capucine21]

Bonsoir,

pense avoir compris ce que tu veux, par défaut le premier carré est vert et les autres sont transparents, ensuite je clique sur un autre sa change l'image et le carré vert.

Pour commencer Php ne me parait pas être indiqué pour ce que tu cherche à faire, c'est un langage côté serveur et tu veux agir côter client.
le problème c'est que tu change l'image grâce à une ancre donc la page ne se recharge pas donc ton php ne donne rien.

un petit coup de javascript peut-être?
Tu code une petite fonction que tu appelle avec un onclick sur ton carre
Quand tu clic sa change l'image de fond, et tu change en même temps la source de ton carre par un carre vert (sans oublier de réinitialisé l'ancien carré qui été sélectionné à transparent).

je te met un pti exemple de fonction javascript:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var active = 1; //carre actif par défaut
function changerImage(id)
{
ancre = "img"+id;
carre = "carre_"+id;
old = "carre_"+active
self.location.hash=ancre;//je vais à mon ancre
//je change la source du carre sur lequel je viens de cliquer si il est différent du précédent et je change aussi le précedent.
if(id != active)
{
document.getElementById(carre).src = "carrevert.gif";//le new carre devient vert
document.getElementById(old).src = "transparent.png";//l'ancien redevient transparent
active = id; //on change l'iddu carre actif
}
}
</script>
 
//pour l'appeler un truc du genre :
<img id="carre_2" onClick="changerImage('2')" src="img/transparent.png" width="24" height="19" border="0">

J'espère t'avoir apporter uen piste, bonne continuation.

[manuphi]

sharrascript,
c'est vraiment sympa de passer du temps sur mon pb, mais ta solution ne fonctionne pas.
Il y a peut-être une erreur dans le "if" ?

Capucine21,
j'avais en effet remarqué effectivement que le problème était que la page ne se rechargait pas (et d'ailleurs c'est voulu puisque mes images s'affichent dans un container exprès pour que la page ne se recharge pas).
je vais essayer ta solution.
Le problème c'est que je suis à peu près aussi nul en javascript, qu'en php ...
je te tiens au courant.

[manuphi]

Capucine21,
Je ne comprends pas comment intégrer ton code :

//pour l'appeler un truc du genre :
<img id="carre_2" onClick="changerImage('2')" src="img/transparent.png" width="24" height="19" border="0">

??

Je t'avais prévenu, je ne suis pas très doué.

[sharrascript]

j'ai peut être pas tout compris, mais essai ça:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="carre">
<?php
$chemin='/';
$page1='index.php?img=img1#img1';
$page2='index.php?img=img2#img2';
$page3='index.php?img=img3#img3';
$page4='index.php?img=img4#img4';
$page5='index.php?img=img5#img5';
$page6='index.php?img=img9#img6';
$page7='index.php?img=img7#img7';
$page8='index.php?img=img8#img8';
$page9='index.php?img=img9#img9';
?>
      <a class="carre" <?php if($_GET['img']=='img1' OR !isset($_GET['img'])){ echo'id="active_menu"';} echo 'href="'.$page1.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img2') { echo'id="active_menu"';} echo 'href="'.$page2.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img3'){ echo'id="active_menu"';} echo 'href="'.$page3.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img4'){ echo'id="active_menu"';} echo 'href="'.$page4.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img5') { echo'id="active_menu"';} echo 'href="'.$page5.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img6') { echo'id="active_menu"';} echo 'href="'.$page6.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img7'){ echo'id="active_menu"';} echo 'href="'.$page7.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img8'){ echo'id="active_menu"';} echo 'href="'.$page8.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
      <a class="carre" <?php if($_GET['img']=='img9') { echo'id="active_menu"';} echo 'href="'.$page9.'">';?>
      <img src="img/transparent.png" width="24" height="19" border="0"></a>
  </div>

[manuphi]

Ca fonctionne !



Merci beaucoup sharrascript !!!

Tu deviens ma référence en Php (bon il faut dire que je pars de vraiment bas ...)

Par cntre, comme j'aime bien comprendre ce que je fais pour essayer de refaire par la suite dans d'autres circonstances, est-ce que tu peux m'expliquer un peu ton code ?
Oui je sais que c'est beaucoup demandé !
Et si tu n'as pas le temps je comprendrais.
Merci encore.

Et je mets un gros résolu sur cette discussion.

[sharrascript]

hehe,

ça fait plaisir tous ces compliments et donc c'est avec plaisir que je l'explique:

Code :

1
2
3
4
5
6
7
8
9
10
11
<?php
$page1='index.php?img=img1#img1';
$page2='index.php?img=img2#img2';
$page3='index.php?img=img3#img3';
$page4='index.php?img=img4#img4';
$page5='index.php?img=img5#img5';
$page6='index.php?img=img9#img6';
$page7='index.php?img=img7#img7';
$page8='index.php?img=img8#img8';
$page9='index.php?img=img9#img9';
?>

1/ petite modif, tu peux enlever: $chemin='/'; cette variable te sert à rien.

2/ J'ai vu que tu utilisais des variables pour créer tes liens, j'ai donc rien modifié et laissé toutes ces variables à ce niveaux, comme cela c'est plus simple à modifier pour toi à l'avenir.

3/Ensuite, tu aura pu remarqué des ajouts au liens du type: ?img=img2.
Ce sont des variables qui sont passées en paramètre via l'url. Tu peux en mettre plusieurs qui seront séparées par un & (ex: index.php?img=img2&type=2). Ces variables sont récupérables sur une page suivante.

Code :

 if($_GET['img']=='img1' OR !isset($_GET['img'])){ echo'id="active_menu"';}

4/ Et justement, pour récupérer cette variable, il faut utiliser $_GET[''], dans les crochets le nom de la variable, ici img (ex: ?img=img2). Donc $_GET['img'] possède une valeur qui est passée en paramètre, si on clique sur un lien index.php?img=img3, alors $_GET['img'] vaut img3.

5/ c'est pour cette raison que je compare avec img1, img2, img3 etc...

6/ le OR !isset($_GET['img']), signifie "ou si cette variable est vide". C'est par exemple le cas quand c'est la première fois qu'on arrive sur le site.

7/ si les conditions sont respectées, on exécute tout ce qui est entre crochets.

8/ le echo renvoi des données.

9/ echo $page1, renverra index.php?img=img1#img1.

10/ et pour finir l'explication les points ".", il sont utilisés pour la concaténation.

J'espère avoir été claire et si tu veux d'autres éclaircissements fait signe

++ et bonne continuation!!!!

[manuphi]

Encore merci sharrascript
T'inquiètes, quand j'aurais besoin ... je ferai signe !
A+