Modifier la position d'un sprites CSS avec l'url

Bonjour à tous,

Cet appel à l'aide avait été posté sur le forum "CSS et mise en forme, CSS3 " mais peut-être est ce que sa place est plutôt ici sur le forum "Développement web côté serveur "
Suite à la lecture de ce bel article sur les sprites CSS, je pose ce problème :
Il s'agit de créer un menu dont les boutons auraient des évènements changeant selon qu'on soit en "focus", "hover" ou "active".
Je me demande quel script permettrait de récupérer un appel via l'URL, pour que lorsque le lien a été cliqué et que nous avons été dirigé vers la page demandée, le bouton du menu sollicité apparaisse à l'ouverture de cette nouvelle page dans son état "hover".

Voici à quoi ressemble l'écriture de mon menu :

<ul>
<li id ="Boutons_Gene_Guitares">
<a id="lienGuitares" href="Index.php">Guitares</a>
</li>

Si je suis les conseils de HammHetfield à Olivier C, mon code ressemble alors à ça :

<ul>
<li id ="Boutons_Gene_Guitares">
<a id="lien_Guitares" <?php if("lien_Guitares" == $_GET['Boutons_Gene_Guitares']) { echo 'class="open-at-load"'; } ?> href="Index.php?lien_Guitares=Boutons_Gene_Guitares">Guitares</a>
</li>

Coté CSS :

#Boutons_Gene_Guitares{
	display:inline-block;
	margin: 0px auto 10px auto;
	margin-bottom:10px;
	width:80px;
	height:120px;
	background: url("images/Boutons_Menu/Guitares3.svg") 0 0 no-repeat;
}
#Boutons_Gene_Guitares:hover{
	background-position: 0 -120px ;
}
#Boutons_Gene_Guitares:active{
	background-position: 0 -240px;
	}
#Boutons_Gene_Guitares .open-at-load{
	background-position: 0 -120px ;
}	

Malheureusement ce n'est pas si simple et ça ne fonctionne pas, j'ai un message d'erreur de mon serveur...
Peut-être est ce que je me trompe sur l'élément qui doit porter les règles du sprites (du changement de position de l'image de fond du bouton selon la position de la souris) ?
Si quelqu'un sait me guider vers une solution, je me sentirai moins dans l’obscurité et lui serais fort reconnaissant !
Modifié par Benkusz (15 Apr 2014 - 08:22)

L'erreur est dans ton code ^^

#Boutons_Gene_Guitares .open-at-load

Tu appliques la classe (.) "open-at-load" à un élément portant un id (#)Boutons_Gene_Guitares

<a id="lien_Guitares" <?php if("lien_Guitares" == $_GET['Boutons_Gene_Guitares']) { echo 'class="open-at-load"'; } ?> href="Index.php?lien_Guitares=Boutons_Gene_Guitares">Guitares</a>

Si $_GET['Boutons_Gene_Guitares'] vaut "lien_Guitares", tu appliques la classe "open-at-load"... sur l'élément "lien_Guitares".

Le if doit être sur l'élément portant la classe Boutons_Gene_Guitares, pas sur celui "lien_Guitares"


En plus, tu lis mal les informations venant de $_GET ^^

Dans l'URL, après le ? : index=valeur
Ce qui se traduit sur $_GET comme étant :
$_GET['index']=valeur

hors, tu test si $_GET['valeur']==index; ce qui ne peux pas marcher. Sans doute de là que vient l'erreur du serveur ^^

Lothindil,
Merci infiniment de ton attention !!!
J'essaie de bien comprendre et appliquer ce que tu m'expliques mais je n'obtiens pas de bon résultat.

Effectivement je voudrais appliquer la classe "open-at-load" à un élément nommé "Bouton_Gene_Guitares".
Que ce passe-t-il sur mon site ? Un menu prend la forme de boutons. Ces boutons changent d’apparence selon le survole du pointeur.
Une fois le lien cliqué et la nouvelle page chargée, je voudrais que le bouton garde son aspect "au survol du pointeur".
Pour cela je crée donc une class "open-at-load" qui indique une valeur "background-position" à mon bouton #"Bouton_Gene_Guitares" identique à celle "au survol du pointeur".
Reste à comprendre comment faire la jonction entre le lien et le bouton qui "abrite" le lien, lequel est identifié sous le nom "Bouton_Gene_Guitares".

Je vais donc essayer de faire en sorte que mon lien <a></a> soit identifier par un nom : "lien_Guitares" .
Puis il faudrait faire passer un message au serveur comme quoi lorsque le visiteur a cliqué sur <a id="lien_Guitare"></a> il faut qu'à l'ouverture de la page s'applique sur le bouton "Bouton_Gene_Guitares" la classe "open-at-load".
Cela passera par l'url. Donc mon lien initialement <a href="Index.php"> devient

<a href="Index.php?lien_Guitares=Boutons_Gene_Guitares">

Mais il manquerait un script sur la page pour annoncer comment interpréter "open-at-load"...

<script type="text/javascript">
$(document).ready( function () { 
    $("#Bouton_Gene_Guitares #<?php echo $_GET['Bouton_Gene_Guitares']; ?>").addClass('open-at-load');
	$(".Bouton_Gene_Guitares").not('.open-at-load').hide();   
} ) ;
</script>

Mais cela ne marche pas...
Modifié par Benkusz (15 Apr 2014 - 08:26)

pas besoin de javascript pour ça ^^

Tu travailles donc avec 1 lien sur ton menu = 1 page.

On va le faire ensemble, alors.

Le principe : un fichier menu.php qui va être inclus sur toutes tes pages (parce que ça ne fait qu'un menu à maintenir et pas 1 menu *x pages). Ce fichier va contenir le code nécessaire à l'affichage du menu, hormis son css (qui sera sur une page à part) ET va devoir, quand on est sur une page s'afficher différemment pour cette page-là.

Exemple : sur la page "accueil", le lien vers l'accueil sera en hover les autres en normal; sur la page "guitares", ça sera le lien "guitares".

Etape 1, créer la base "fixe" :

menu.php

<nav><ul>
<li id ="lien1"><a href='page1.php'>Lien n°1</a></li>
<li id="lien2"><a href='page2.php'>Lien n°2</a></li>
</ul></nav>

Là c'est en fait le html de menu.php.

Le code css :

nav ul li{
	display:inline-block;
	margin: 0px auto 10px auto;
	margin-bottom:10px;
	width:80px;
	height:120px;
	background: url("images/Boutons_Menu/Guitares3.svg") 0 0 no-repeat;
}
nav ul li:hover, nav ul li.open-at-load{
	background-position: 0 -120px ;
}
nav ul li:active{
	background-position: 0 -240px;
	}

C'est ton css; j'ai juste modifié 2 petites choses :
1) j'ai groupé open-at-load et :hover pour que ça soit plus léger et plus simple à maintenir
2) au lieu d'utiliser l'id de ton li, j'ai utilisé son arborescence, depuis nav (élément html5 pour les menus), puis ul puis li. Je sélectionne les li faisant parti d'un ul faisant parti de nav.

Dans les pages html, on rajoute simplement :

<?php include('menu.php');?>

là où on veut le menu.

Etape 2 : rendre dynamique en fonction de l'URL

Dans cette partie, on ne travaille que sur menu.php
Comme tu travailles sur un système 1 lien = 1 page, on abandonne $_GET, on a les informations qu'il nous faut dans l'URL, à savoir le nom de la page.

La logique :
-> on récupère l'URL ($_SERVER['REQUEST_URI'])
-> à chaque élément du menu, on va vérifier la présence d'un mot clé (titre du fichier en fait) (grâce à strpos)
-> si l'élément est trouvé, on ajoute la classe "open-at-load"

Ce qui donne un truc genre :

if(strpos($_SERVER['REQUEST_URI'],'page1')>0){echo "class='open-at-load';}

A part que le but c'est de mettre le php dans le html (et pas l'inverse) et donc :

<nav><ul>
<li id ="lien1" <?php if(strpos($_SERVER['REQUEST_URI'],'page1')>0){?>class='open-at-load'<?php}?> ><a href='page1.php'>Lien n°1</a></li>
<li id="lien2" <?php if(strpos($_SERVER['REQUEST_URI'],'page2')>0){?>class='open-at-load'<?php}?> ><a href='page2.php'>Lien n°2</a></li>
</ul></nav>

Après, il y a moyen de nettoyer pour rendre plus clair le menu (passage du test en fonction, utilisation d'opérateur ternaire, passage des adresses en tableau pour éviter les erreurs lors de mises à jour,...) ^^ et tu peux bien sûr sortir le class= pour permettre l'ajout d'autres classes (en sachant qu'au pire un class=' ' ne génère aucune espèce de soucis.)
Modifié par Lothindil (14 Apr 2014 - 20:29)

Merci infiniment pour ton aide !
Pourtant le serveur bloque encore... Il pointe la dernière ligne du menu...
comme s'il n’appréciait pas que l'on ferme la balise nav "</nav>" !
Est ce que le problème vient du fait que je teste le code en appelant la page depuis mon navigateur ?
Sans avoir été dirigé par un clic vers la page guitare, aucun URI n'a été fourni pour accéder à cette page et le serveur ne comprends pas pourquoi on lui demande une requête visant à interpréter le lien de provenance d'une page qui n'a pas de provenance puisqu'elle a été appelé directement à partir de la barre d'adresse. (j'espère être compréhensible)

Est ce que je m'égare ?

Faut le tester en contexte, pas en appelant menu.php. Avec le principe même d'aller chercher l'url, ça ne peut marcher qu'en contexte (dans une des pages appelées par le menu quoi)