menu image en hover modif html

[letyrex]

Bonjour,

Je souhaiterais modifier le code HTML du menu pour insérer un onmouseover.

Lorsque l'on ajoute une image aux lien menu on à ce code la en html:

<img src="/test/images/sous-menu/la-maison/HISTOIRE.jpg" alt="Histoire" style="display: block; margin: 0 auto;" width="160px" height="60px">

et je souhaiterais ajouter ceci:

<img src="/test/images/sous-menu/la-maison/HISTOIRE.jpg" alt="Histoire" style="display: block; margin: 0 auto;" width="160px" height="60px" onmouseover="this.src='/test/images/sous-menu/la-maison/HISTOIRE-NB.jpg';" onmouseout="this.src='/test/images/sous-menu/la-maison/HISTOIRE.jpg';">

J'ai essayer en CSS mai ce n'est pas top et je n'ai pas le même rendu, en éditant directement via firebug ou autre en ajoutant les deux ligne "onemouseover et onemouseout j'ai exactement ce que je désire.

Mai je ne trouve pas le fichier PHP à modifier.

Pouvez-vous m'aider svp?

En vous remerciant par avance.

Cordialement
Seb

[wabaw]

Re : menu image en hover modif html

Bonsoir Seb,
on ne peut pas faire ce que tu veux, dans la mesure ou les liens de menu sont tous générés par le même fichier natif Joomla et ceci à chaque clic. Donc pas de fichier html...
[Ou alors, peut être qu'avec de l'override de fichiers, et de la complexité...]

Mais bon, la meilleure solution est avec du CSS. Une classe CSS pour chaque lien, ce qui donnerais <li class="histoire"> et comme propriété CSS une image en background-image, et une autre sur la pseudo classe li.histoire:hover

Autre solution, plus simple mais pas supporté par certains navigateurs, les filtres CSS, en dans ton cas grayscale, tu trouver plus d'infos sur ce site par exemple : https://la-cascade.io/les-filtres-css/

[lomart]

Re : menu image en hover modif html

Bonjour,

Une solution en CSS est d'utiliser des images coulissantes.
Voir le dernier exemple de ce tuto: http://css.mammouthland.net/zoomer-u...e-avec-css.php

[letyrex]

Re : menu image en hover modif html

Bonsoir Seb,
on ne peut pas faire ce que tu veux, dans la mesure ou les liens de menu sont tous générés par le même fichier natif Joomla et ceci à chaque clic. Donc pas de fichier html...
[Ou alors, peut être qu'avec de l'override de fichiers, et de la complexité...]

Mais bon, la meilleure solution est avec du CSS. Une classe CSS pour chaque lien, ce qui donnerais <li class="histoire"> et comme propriété CSS une image en background-image, et une autre sur la pseudo classe li.histoire:hover

Autre solution, plus simple mais pas supporté par certains navigateurs, les filtres CSS, en dans ton cas grayscale, tu trouver plus d'infos sur ce site par exemple : https://la-cascade.io/les-filtres-css/

Bonsoir et merci pour ta réponse.
je ne connaissais pas le " webkit-filter " et c'est exactement ce que je souhaite car je peu faire un changement de teinte sur une photo pour la mettre en sépia! ca a un avantage je diminue la taille et le chargement des images.
comme ca je ne suis pas obligé de refaire tout mon CSS pour les différents menu.

j'avais déjà pensé à faire le glissement des images mai je devais refaire tout mon css. alors que la page principale du site est terminé, je ne voulais pas trop m’embêter. mai la propriété "-webkit-filter" est exactement ce que j'ai besoin.

Merci beaucoup!


pour revenir sur ma demande, il est impossible de modifier ou d'ajouter un code html afin d’améliorer sont interface et son site internet sans passer par un override? celas vas demander pas mal en code php.

merci pour vos aides.

[wabaw]

Re : menu image en hover modif html

Il existe pas mal d'extensions de menu qui pourront peut-être faire ce que tu veux. Quant aux overrides, ce n'est pas si compliqué si tu connait un peu de php et de html/css.
Le grand avantages d'un CMS, c'est qu'il permet de faire facilement des choses difficiles, mais parfois des choses simples en deviennent plus complexes a faire.
��