Nouveau bouton de navigation et survol ?

[Tyma]

Bonjour, voilà je viens vous exposer le problème que je rencontre .

Il y a quelques temps j'ai suivi les instructions d'un des tutoriels officiels de FA pour ajouter le changement des images de la barre de navigation quand la souris passe dessus. Pour le moment tout va bien.

Il y a quelques minutes, j'ai voulu ajouter un nouveau bouton personnalisé dans cette barre de navigation. L'image de ce bouton s'affiche comme il faut.


Le problème est le suivant :

Quand la souris passe sur ce nouveau bouton, cela ne fait rien (c'est bien normal comme c'est une image seul). C'est pour cela que j'aurais aimé savoir comment faire pour que l'image de ce nouveau bouton change comme les autres au passage de la souris ?


Merci de votre attention .

[Invité]

Bonjour,

C'est une autre histoire, en effet (me demande pourquoi le tuto ne comprend pas cette partie-là ?)

La deuxième partie de ce post (à partir de "Pour les boutons personnalisés (menus personnalisés)") répondrait certainement à ta question...

[Tyma]

Bonjour, merci pour la réponse .

Je viens de parcourir le post en question, j'ai bien compris ce qu'il fallait ajouter à l'adresse de l'image. Mais quand est-il du CSS ?

Je ne sais pas trop comment le lire :

Dans le CSS on lui donne les même propriétés qu'aux autres icônes ainsi :
.bidule {position: absolute; top: YYYpx; left: XXXpx;
}

Je ne comprend pas trop ce CSS que je dois utilisé ?
Je ne vois pas ou sera ajouté la deuxième image pour le survol ?

Merci bien .

[Invité]

Woups, sorry, oui il n'était pas complet, mais voilà qui est fait.

Pour les boutons personnalisés (menus personnalisés) le tuto est un peu plus complexe :

• Tout d'abord dans le PA >> Affichage >> Entête & Navigation > tableau de la barre de navigation
  
• Il faut donner un attribut class à l'image en allant sur du menu.
  
• A la fin de l'adresse de l'image il faut ajouter un guillemet, par exemple : .png"
  
• Un espace et class="bidule ce qui donne :
  http://url_image.png" class="bidule
  qui sera généré par les variables comme il se doit :
  <img src="url_image.png" class="bidule" />
  
• Dans le CSS on lui donne les même propriétés qu'aux autres icônes ainsi :

  .bidule {
  background-image: url('URL'); /*image si la souris ne survole pas*/
  width: ??px; /*Largeur de l'image*/
  height: ??px; /*Hauteur de l'image*/
  }
  .bidule:hover{
  background-image: url('URL'); /*image si la souris survole*/
  width: ??px; /*Largeur de l'image*/
  height: ??px; /*Hauteur de l'image*/
  }

• Mais attention, il faudra à chaque fois qu'une image sera modifiée à cet endroit du PA, remettre l'url image et son class comme précédemment expliqué.

Ne pas oublier que ce n'est pas au point l'histoire et que c'est un beugant.

[Tyma]

C'est rien .

Par contre, je viens d'ajouter ce CSS, en remplacent les informations par rapport a mes deux images (que ce soit les liens vers les deux images ainsi que leur taille) mais en validant cela ne fonctionne pas correctement.

Au survol de la souri, l'image ne change pas, le noir de l'image s'accentue très faiblement, presque pas, mais elle ne se remplace pas par la deuxième image ? Il ne manque rien de plus au CSS ?

Merci bien

[Invité]

Sur l'autre tuto de Narumi, il est bien dit qu'il faut remplacer l'image de ton menu par une image transparente (vide) qui est : https://2img.net/i/fa/empty.gif" class="bidule
Les images des boutons sont en background dans le CSS.

As-tu procédé ainsi ?

[Tyma]

Évidement, que je suis bête. J'avais bien intégré le " class="bidule, mais derrière mon image, il manquais donc d'ajouter une image vide (transparente).

Je viens de modifié cela à l'instant, et je suis heureux d'annoncer que cela marche très bien .

Donc je te remercie pour l'aide précieuse que tu m'as apporté et je vais éditer le premier sujet pour le .

Je te souhaite de passer une bonne journée .

[Invité]

Mais je t'en prie.