Changer d'image suivant l'URL

Bonjour à tous,

Voila j'ai un menu gauche...

-> Titre1
-> Titre 2
-> Titre 3

Les titres sont des images. J'aimerai lorsque l'on clique sur le titre que l'image change ( img_on/ img_off). Il faut aussi que cela test L'URL de la page .. par exemple si je tappe directement http://titre2.html que l'image du titre 2 passe à l'état ON ..

Je ne sais pas si je me suis fais bien comprendre.

Voila si quelqu'un pourrait m'expliquer comment faire cela en JS
Merci d'avance

bonjour,

Est-ce vraiment utile de le faire en javascript ? L'utilisation de selecteur css a:active ne suffirait-elle pas ?

a
{background-image:url("img_on.png");}
a:active
{background-image:url("img_off.png");}

non car il faut tester l'URL de la page ... si je veux aller directement sur la page titre2.html et bien il faut que dans le menu ->Titre2 soit à la position ON.

en gros si je fais un "pseudo-algorithme":


Si ( URL== titre1.html)
alors
img src="http://balbalba/img/img_titre1_on.gif"
sinon
img src="http://balbalba/img/img_titre1_off.gif"

ainsi de suite

voila et comme je ne connais pas trop le JS .. j'aurais besoin d'un coup de pouce
Modifié par Darki (15 Nov 2005 - 15:04)

Bonjour,
Je pense que tu devrais utiliser un langage côté serveur comme le php pour faire ça. Comme ça ça ne dépend pas du javascript.

Arf, désolé pour la bétise,je n'arrive pas a me defaire de l'idée que :active modifie le lien pointant vers la page actuelle. Tout ça partant d'une confusion avec la pseudo class :target

Pour répondre à ta question, j'avais déjà fais ça (très malproprement, donc je ne mets pas le code) et c'était en php.

Le principe était très simple.
- le menu est inclu (php) en ajoutant le numéro de l'item à afficher differement :
require('menu.php?actif=x')
- dans ce menu php : 2 tableaux : 1 contenant les liens en normal et 1 contenant les liens en actifs
- on affiche tout le tableaux des liens normaux sauf le x qu'on prend dans le second tableau.

un tableau associatif serait peut-être plus futé pour gerer les remaniements de menu sans toucher au ses appels... probablement. Je vais m'attaquer a ce probleme bientôt, normalement, si ça t'intéresse ...

Je verrais bien un truc du style :

$tab = array(
"Item 1"=>"/page1.html",
"Item 2"=>"/page2.html",
"Item 3"=>"/page3.html"
);

echo "<ul>";
foreach ($tab as $key => $value) {
if ($value == $pageActive) echo "<li><img src=\"$value.on.png\" alt=\"$key\" /></li>";

else echo "<li><a href=\"$value\" title=\"$key\"><img src=\"$value.off.png\" alt=\"$key\" /></a></li>";
}
echo "</ul>";

Mais bon ... c'est beaucoup simplifié. Mais ça passe par un bon nommage des images aussi du coup.

Pour ma part j'utilise également un tableau associatif mais dans lequel je ne stocke pas les noms des fichiers mais de repertoires. Je regroupe les rubriques dans des répertoires distincts. Ensuite il suffit d'avoir le nom du repertoire contenant le fichier en cours pour obtenir l'état "current".

Valà

(en PHP bien sûr)