Bonjour les amis,

Je suis en train de développer un site web. J'ai créé un menu inclus dans les balises <header>. Celui-ci est composé de différents boutons qui permettent de naviguer de page en page. Ce menu est contenu dans menu.php

Ce menu sera présent sur chacune des pages, je l'inclus via la fonction include de php. Cependant, je dois envoyer en paramètre à menu.php un id qui correspond au bouton ayant permis d'arriver sur la page courante. Après avoir identifié ce bouton, l'objectif est de le changer de couleur (c'est en quelque sorte un témoin visuel qui indique à l'utilisateur où il se situe. (exemple ci-dessous))

Ces boutons sont en réalité des images. J'en ai des marrons et des blancs. En blanc, cela indique que je me trouve sur la page correspondante OU que je suis en train de survoler le bouton (code correspondant ci-dessous).

$("#trophee").hover(
			   function () {
			     $(this).attr('src','img/trophee-hover.png');  
			   },
			   function () {
			      $(this).attr('src','img/trophee.png');  
			   }
);

J'inclus mon menu puis j'appelle la fonction selection_onglet

<?php include("menu.php"); selection_onglet(1); ?>

Avec cet appel, je cherche à faire apparaître mon menu avec le premier bouton en blanc (l'image en forme de trophée).

Question 1 : Est-ce que le fichier menu.php sera d'abord chargé totalement avant que l'appel à selection_onglet() se fasse ?

La fonction selection_onglet() se trouve à la fin de menu.php (ça laissera le temps au menu de s'afficher avant (je ne me trompe pas ?))

En voici un extrait :

 function selection_onglet($id_onglet)
		    {
				if ($id_onglet == 1)
				{
					?><script>
					    survol_icone("#trophee", "trophee-hover.png"); 
					</script><?php
				}

                      ....

Question 2 : Est-ce que les mélanges de php et Javascript comme dans ma fonction sont déconseillés ? Si oui, avez-vous une alternative ?

Puis s'en suit la fonction Jquery :

function survol_icone(element, media)
{				  
     $(element).attr('src','img/trophee-hover.png');  				 
}

Le tout fonctionne très bien ! (Mais alors qu'est-ce que je fou ici En fait je cherche à faire du bon code, pas juste quelque chose qui fonctionne)

Question 3 : Lorsque j'inclus ma fonction Jquery dans 

jQuery(document).ready(function(){

, elle ne fonctionne pas... En connaissez-vous la raison ?

Question 4 : Sachant que ma fonction php se trouve à la fin du code, le menu aura déjà été chargé lors de l'appel, ça ne pose donc pas de problème ?

Merci d'avance les copains ! :-)

Salut,

• Question 1 : selection_onglet est une fonction PHP, qui écrit un code javascript différent en fonction selon l'id. C'est une façon hyper-tordu de faire les choses. Mais pour répondre à ta question, ce script sera appelé quand le menu sera chargé donc pas de souci.
• Question 2 : j'ai répondu ci-dessus, avoir du script un peu partout dans ta page, ça rend le tout complétement ingérable
• Question 3 : vu que tu insère ton script en fin de body, il est possible que le l'événement 'ready' ai déjà été déclenché ce qui explique que ça ne fonctionne pas
• Quesiton 4 : si tu mets le script en fin de body - ce qui est une bonne pratique - pas de problème effectivement.

 Maintenant, voilà deux mauvaises nouvelles :

• vide le cache de ton navigateur, et recharge ta page. tu verras que l'effet de survol n'est pas instantané car il faut d'abord que l'image soit chargée (en local c'est furtif, mais ça ne l'est pas pour un site en ligne). Une solution serait de préchargée toutes les images : une vraie usine à gaz.
• t'as pas besoin de javascript pour faire un menu au survol. ça se fait très bien en CSS : https://openclassrooms.com/courses/bien-utiliser-les-sprites-css

Bonjour, 

Super ! Merci beaucoup pour ces réponses :-)

Bon bah je vais retaper tout ça, je vais m'orienter sur le survol avec css.

En revanche, as-tu une alternative à mon mélange de Php/JavaScript hyper-tordu ? 

Bonne journée 

Dans le cas d'un menu, la pratique la plus courante consiste à attribuer avec PHP une class à l'élément HTML qui représente le menu actif. Comme ça tu peux savoir quel élément représenté différemment aussi bien dans ton CSS que dans ton JS.

Tu peux aussi associer des données à un élément HTML grâce aux attribut data- : https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes 

Tu peux éventuellement initialiser une ou deux variables JS comme ceci :

<script type="text/javascript" >
var pseudo = "<?php echo $pseudo ?>";
// ou encore :
var config = <?php echo json_encode($config) ?>
</script>
<script type="text/javascript" src="script.js" ></script>

L'inconvénient c'est que ça oblige à déclarer des variables globales.

Ah mais oui ! Merci beaucoup je vais mettre tout cela en application ,

Bon weekend