Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

[sayann]

Bonjour,

J'utilise Joomla 2.5 et le template spa_v1..remodifié.
voici le site : osteovincennes.fr

Mon souci :
Dans le Main Menu situé à gauche (left), j'ai des images fixes, je voudrais qu'il y ai un rollover lorsqu'on passe la souris dessus. J'ai déjà préparé les images (exemple, le boutton accueil s'appelle b_accueil0.png et le bouton que j'aimerais afficher en rollover est b_accueil1.png.
Les options proposées dans le l'administration des menus ne me permettent d'afficher qu'une image fixe, et je ne retrouve pas le code pour ce menu, pour éventuellement y rajouter les lignes de commande pour le hover.

comment feriez-vous ? Je galère depuis un petit bout de temps, je ne suis pas développeur ni programmateur.

Merci pour votre aide !

[lefabdu51]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

<li class="item-435 current active"><a href="/"><img class="art-menu-image" src="/templates/photoshot/images/b_accueuil0.png" alt="Accueil"></a></li>

pour ce lien mettre li.item-435 {background:mon image}
dnas le fichier css correspondant.

Avec firebug, il est possible de determiner l'id de chaque élément de menu

[MiniMo]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Bonjour sayann,

J'ai visité ton site, et j'ai plusieurs remarques à faire, si tu me le permet
Je pense dire vrai en disant que ton site est encore en développement, et j'ai donc deux trois conseil sur les éléments déjà présents.

Tout d'abord j'ai remarqué que l'image tout à gauche, située dans la div 'logo' est incluse dans un lien mort (erreur 404), si tu veux conserver le lien sur cette image, je te conseil de changer le contenu de l'attribut href du lien par "<?php echo $this->baseurl ?>" directement dans ton fichier index.php au bon endroit, ou par la gestion du template si tu as la possibilité de le faire, tu renseignes l'adresse de ton site!

Ensuite, pour en revenir à ton problème, ce que tu veux faire n'est pas possible directement par les style css, car tes images sont définies 'en dur' dans ton html, il te faudra passer par du javascript, mais c'est de grande méthode pour pas grand chose. De plus, ton menu reprend exatement les mêmes liens que ton menu principal, est-ce judicieux? A toi de voir. Une autre chose qui me gène, c'est que ce menu est donc fait uniquement d'image, ce qui n'est pas très recommander niveau accessibilité et référencement.

Ce que je te propose donc dans l'idéal:
-Change de menu: fait en sorte d'avoir un menu en texte et non un menu-image, tu peut obtenir exatement le même rendu qu'actuellement avec des style css (border etc.) appliqués sur une liste (comme ton menu en haut), et avec ces style tu peux jouer avec des évènement comme le hover (ex. sur une liste: ul li:hover{border: 1px solid #fff; color: #222;} )....
-Instruis toi un minimum sur le HTML et CSS et tu pourra faire des miracle sur ton site!

Et comme l'as dis lefabdu51, un inspecteur tel que le plugin firebug pour firefox te permettra de voir comment est contruit ta page, mais aussi dans quel fichier et à quelle ligne se situe le style d'un élément! (Ps: tu peux aussi avoir un inspecteur intégré à ton navigateur si celui est assez récent en pressant simultanément Ctrl + Maj + i)


Voilà j'espère t'avoir aider =)

[sayann]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Merci pour vos réponses à tous les 2, et pour les conseils pas de soucis pour la critique c'est comme ça qu'on apprend


je vais essayer les 2 méthodes, mais j'aimerais vraiment garder des images et non du texte car ce site est surtout une vitrine, je préfère qu'il soit un peu plus beau, surtout que mes boutons sont sympa (ceux que j'ai préparé pour le roll over)

merci j'essaye now..

[sayann]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

lefabdu51 :
Ok bon ça craint héhé, déjà, je ne trouve pas la ligne <li class="item-435 current active"><a href="/"><img class="art-menu-image" ...
Avec Firebug je la vois effectivement, mais lorsque j'édite le template.css je ne retrouve pas cette ligne..
j'ai cherché tous les .css et les .php du dossier d'installation..
Dans le template.css je trouve effectivement des lignes correspondant au art-menu-image mentionné, je pourrais rajouter une image mais une seule qui prendrait tout le background du menu, ce n'est pas ce que je veux malheureusement
arg je bloque

MiniMo :
comme mentionné plus haut, je sais maintenant ou se trouve le code pour modifier le style du menu, avec un peu de recherches je pourrais, je suppose, faire un truc en texte sympa.
Ceci dit, j'ai trouvé cet article qui a l'air intéressant :
http://www.joomla-css.nl/index.php/en/image-menu-en

je vais essayer demain je vous dirais

merci encore

[MiniMo]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Bonjour,

lefabdu51 :
Ok bon ça craint héhé, déjà, je ne trouve pas la ligne <li class="item-435 current active"><a href="/"><img class="art-menu-image" ...
Avec Firebug je la vois effectivement, mais lorsque j'édite le template.css je ne retrouve pas cette ligne..
j'ai cherché tous les .css et les .php du dossier d'installation..

En fait c'est normal que tu ne trouve pas le code dans le css, puisqu'il n'existe pas. En fait à la création de ton menu, ton module qui gère ce menu va donné un id a chaque item de ta liste (d'où les id="item-435" etc. ). Pour faire ce que tu veux faire, puisque tu à l'aire de vouloir persévérer pour faire un menu-image, tu dois mettres tes image en background, pour chaque item de ta liste.

Ainsi ton css ressemblera à ça:

#item-435{
backgroud-image: url('url_de_ton_image') no-repeat;
}
#item-435:hover{
backgroud-image: url('url_de_ton_image_survolee') no-repeat;
}

Et faire ainsi pour chaque item de ta list, en fonction de leur id mai par contre tu devras supprimer dans le code html (inde.php) les balises img de ton menu (logique). Mais encore une fois, les robots qui vont visiter ton site vont encore moins voir que c'est menu avec des lien (il verra des lien vide) puisque rien n'est présent physiquement dans ta liste....

Voilà j'espère que ça t'aide un peu

[lefabdu51]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

regardes dans le fichier index.php...

Ps: artisteer est commercial, as tu posé la question / effectué une recherche sur leur forum?

[sayann]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Wah merci pour ces explications MiniMo, j'y vois carrément plus clair maintenant
Je vais faire les 2, texte et image, et en fait il y a déjà le top menu qui est en texte avec des liens valides (donc pour les robot gogole ça devrait passer ?

Merci beaucoup

Et pour le fab, j'avais déjà regardé dans les .php, tous pas grave MiniMo m'a bien expliqué et j'ai compris la méthode
Merci à toi aussi

[MiniMo]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Pas de quoi =D

Heu oui ça devrait passer, enfin au pire passe ta page au validateur W3c, voir si ya des problème au niveau du html.
ET au fait, penses bien à règler le problème que je t'ai signaler au niveau de ton lien sur ton image tout à gauche

[sayann]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Yes je vais m'y remettre ce weekend là je suis au travail je n'ai pas le temps
Merci beaucoup

Pas de quoi =D

Heu oui ça devrait passer, enfin au pire passe ta page au validateur W3c, voir si ya des problème au niveau du html.
ET au fait, penses bien à règler le problème que je t'ai signaler au niveau de ton lien sur ton image tout à gauche

[lefabdu51]

Re : Template Spa_v1 : comment faire un rollover avec 2 images dans le main menu ?

Ne met pas ces classes.
Laisse tes images de fond que tu as insréré via l admin de joomla.
reprends juste cette classe dans ton fichier css les classes concernant le survol (elles nont pas dimage de fond):
#item-435:hover{
backgroud-image: url('url_de_ton_image_survolee') no-repeat;
}