[PHP-JS] Ancre html # avec PHP

**manuphi** · 03/12/2007, 18h14

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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** · 03/12/2007, 19h20

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Les conditions c'est le double �gale:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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** · 03/12/2007, 19h26

Merci sharrascript

Mais alors l� ya plus rien qui fonctionne !

**sharrascript** · 03/12/2007, 19h47

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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** · 03/12/2007, 20h16

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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** · 03/12/2007, 20h43

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** · 03/12/2007, 21h03

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** · 03/12/2007, 21h35

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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** · 03/12/2007, 22h14

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** · 03/12/2007, 22h29

hehe,

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

 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** · 03/12/2007, 22h32

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

A+

[PHP-JS] Ancre html # avec PHP

Langage PHP

Discussions similaires

Partager

Partager