Bouton du forum changeant lors du survol

[Madmoizeelle]

Bonjour ! Tout mon problème est pratiquement dit dans le titre.
J'ai cherché pendant longtemps une discussion ou un tuto (qui expliquerait un code css) qui pourrait m'aider, mais je ne l'ai pas trouvé...

J'explique en détail :
J'ai fais 2 images : une par défault et une autre qui apparaitrait lorsque l'on survole avec la souris le bouton "accueil" du forum.

Quelqu'un a une idée ? Merci d'avance =)

[Izumi375]

Bonjour,

Avec le css je sais pas... (je suis même pas sure que ca soit faisable)
Mais avec le html là je connais

Code:

<img src="lien de l'image1" onmouseover="this.src = 'lien de l'image2';" onmouseout="this.src = 'lien de l'image1';" border="0">

Viel Glück!

[Madmoizeelle]

Merci de ta réponse si rapide =D
Et je place ce code à quel endroit ? Car j'aimerai faire ça avec tous les boutons du forum (galerie, groupes etc...)

[Izumi375]

Euh...
Alors là la seule idée qui me passe par la tête c'est de toucher aux templates (il faut etre fondateur du forum dans ce cas)
Mais pour éviter de dire des bêtises je vais tester de mon côté.
Au fait! Dans ce cas on en fait plusieurs avec des liens donc on utilise plutot:

Code:

<a href="Lien1" onmouseover="nomimage1.src='lien image1.2'" onmouseout="nomimage1.src='lien image1.1'"><img src="lien image1.1" name="nomimage1"></a>

Vous pouvez me passer les liens de vos images? En mp si ça vous gêne de les montrer.

[Izumi375]

C'est bon ça marche!

Alors c'est assez radical ce que je fais mais je vois pas d'autres moyens (peut etre que d'autres trouveront).

On supprime carrément la barre de navigation et on fait tout à la main.
On retrousse ses manches et c'est parti!

Alors bien entendu vous devez etre le fondateur du forum. Si c'est pas le cas... bah faut demander au boss du fofo de le faire...

Après direction:

PA
Affichage
Templates
Général
on modifie overall_header

là dans le template on cherche la nav barre

Code:

{GENERATED_NAV_BAR}

et couic! on la supprime.
Après c'est tout de suite moins amusant...

A la place (faites attention a rester dans la cellule td!)

bah on refait tout à la main avec le code que j'ai donné plus haut. Ici vous pouvez voir le test pour vous rassurez

http://freakssqueele.forumzarbi.com/

[Neptunia]

Bonsoir !


Le problème avec cette technique c'est que l'on aura du mal à masquer certains boutons en fonction du statut du visiteur (connecté ou non/membre ou modo)
Chaque bouton de la barre de navigation de base dispose d'une id.
On va donc passer par le css.

On commence par remplacer chaque image sur le panneau admin par celle ci
https://2img.net/i/fa/empty.gif

Ensuite direction le css où on ajoutera ceci

#i_icon_mini_index{
width:XXpx;
height:YYpx;
background:url("http://AdresseImage1");
}
#i_icon_mini_index:hover{
width:XXpx;
height:YYpx;
background:url("http://AdresseImage2");
}

Ici on définit les propriétés du bouton accueil.
Le premier "chapitre" définit le bouton utilisé en temps normal, et le second, l'état survolé.
On remplace XX par la largeur du bouton et YY par sa hauteur.

[Madmoizeelle]

Izumi, je vais plutôt rester simple et tester avec les liens ^^
Je te donne les url des images si tu veux :
- http://data.imagup.com/6/1109015420.gif : celle là doit être pour tous les boutons.
- http://data.imagup.com/4/1109015500.gif : celle-là doit changer en fonction de là où le lien conduit ^^ (ici c'est l'accueil)

J'ai assez compris le 1er principe, mais je sèche sur là où il faut placer le code... Si c'est dans un template, tu peux me dire lequel ? (parce que là j'en ai aucune idée...)

PS : je suis bien la fondatrice de mon fofow !
(et tu peux me tutoyer parce que ça me gêne ^^)

Ah mais je viens de faire comme AoF-Neptune, et ça marche super bien ! Merci beaucoup ! Et je procède de la même façon pour les autres boutons, en changeant "index" par "galerie", "groupes" et tout le blabla... ?
En tout cas merci =) (si vous voulez voir ce que ça donne, c'est ici http://easyfun-videogames.forumactif.com/

[Izumi375]

Tiens j'avais oublié l'histoire de l'id... :S

Désolée pour cette réponse incomplète. Je vais chercher de mon côté comment on ferait en passant par le template question de d'élargir son savoir (et me mettre au css pour arrêter de dire des bêtises...)

Encore désolée! Et merci à AoF-Neptune pour m'avoir corrigé!

Ps: j'avais donné le template (overall_header)

[Madmoizeelle]

C'est pas grave, au moins tu m'as donné du courage, parce que je désespérais xD
Et puis moi et le css ça fait 2 donc tu es plus doué que moi ^^'

Par-contre, j'ai fais pareil pour le bouton du portail, mais ça marche pas... le code est bon ?

Code:

#i_icon_mini_portail{
width:80px;
height:77px;
background:url("http://data.imagup.com/6/1109015420.gif");
}
#i_icon_mini_portail:hover{
width:186px;
height:75px;
background:url("http://data.imagup.com/4/1109017243.gif");
}


[Neptunia]

Ah mais je viens de faire comme AoF-Neptune, et ça marche super bien ! Merci beaucoup ! Et je procède de la même façon pour les autres boutons, en changeant "index" par "galerie", "groupes" et tout le blabla... ?

C'est pas aussi simple que cela :
Voici les id pour la barre de navigation
#i_icon_mini_index -> Accueil
#i_icon_mini_gallery -> Galerie
#i_icon_mini_calendar -> Calendrier
#i_icon_mini_portal -> Portail
#i_icon_mini_faq -> FAQ
#i_icon_mini_search -> Recherche
#i_icon_mini_members -> Membres
#i_icon_mini_groups -> Groupes
#i_icon_mini_profile -> Profil
#i_icon_mini_message -> Messagerie privée (pas de nouveaux messages)
#i_icon_mini_new_message -> Messagerie privée (si nouveaux messages)
#i_icon_mini_logout -> Déconnexion
#i_icon_mini_register -> S'inscrire
#i_icon_mini_login -> Connexion

Encore désolée! Et merci à AoF-Neptune pour m'avoir corrigé!

J'avais volontairement laissé dévier le sujet sur les templates voir s'il y avait une solution que j'aurais ignorée.
Le problème majeur en supprimant la variable de la navbar, est qu'il faudrait afficher le bouton Connexion et le bouton déconnexion, ou encore afficher le bouton Profil ou MP même pour les invités.

[Madmoizeelle]

Merci beaucoup ! J'ai tout noté dans un coin pour pas oublier ^^
Les 3 premiers que j'ai fais marchent, je finirai le reste demain =)

[LoOiic]

Bonjour,

Avec le css je sais pas... (je suis même pas sure que ca soit faisable)
Mais avec le html là je connais

Code:

<img src="lien de l'image1" onmouseover="this.src = 'lien de l'image2';" onmouseout="this.src = 'lien de l'image1';" border="0">

Viel Glück!

Bonjour Izumi375,

Avec ce code es-ce possible d'ajouter un texte (comme une "value") sur l'image ?
J'ai bien sur essayer mais sa n'a pas fonctionner (avec une value="")

Merci
Hancock

EDIT : C'est bon j'ai réussi avec un autre code..
Bonne Soirée

[Madmoizeelle]

J'ai une dernière question...
J'ai désactivé "Afficher seulement des images dans la barre des liens" pour l'avoir sur 2 lignes, mais le forum marque toujours le texte à côté ! J'aimerai l'enlever... Mais comment ?

Voici ce que ça fait : https://i.servimg.com/u/f34/15/74/87/05/screen10.jpg

[LoOiic]

Bonsoir,

Il faut vous rendre dans :
> PA
> Affichage
> Page d'Accueil
> En-tête et Navigation

Afficher seulement des images dans la barre des liens : COCHE OUI !

Cordialement,
Hancock

[Madmoizeelle]

Oui mais seulement, comme la barre est assez longue, la dernière image de survol bug et passe de bas en haut à tout vitesse...
C'est pour ça que je préfèrerais la mettre sur 2 lignes ^^
C'est difficile à expliquer, le mieux c'est que tu regardes toi-même : http://easyfun-videogames.forumactif.com/

[LoOiic]

Ok je vois..

Et toujours au même endroit :

Forcer la barre de navigation à rester sur une ligne : Tu as cocher quoi ici oui ou non ?

Même si je crois que sa ne résoudra pas le problème..

[Madmoizeelle]

J'ai mis "non", mais si je mets "oui", ça change la largeur du forum...
Sinon j'ai peut-être une solution ! Je vais changer l'image par défault de façon qu'elle aie la même largeur que celle de survol ^^ normalement après ça ne devrais plus bouger comme ça...

[LoOiic]

Ok, mais sache que de toute façon la largeur du forum est réglable dans la "configuration" donc si tu obtiens l'effet voulu tu peux toujours re-augmenté la largeur de ton forum^^.

Bonne continuation
Hancock

[Madmoizeelle]

Merci pour ces informations =)
Je pense que ça va marcher ^^
Bonne soirée !

[Neptunia]

J'ai mis "non", mais si je mets "oui", ça change la largeur du forum...
Sinon j'ai peut-être une solution ! Je vais changer l'image par défault de façon qu'elle aie la même largeur que celle de survol ^^ normalement après ça ne devrais plus bouger comme ça...

Ah oui, il est quand même préférable d'avoir une image de survol de mêmes dimensions que l'image de base.
Eventuellement quelques pixels de plus pour produire un effet de loupe mais pas plus de 4-5 pixels dans ce cas.

[Madmoizeelle]

A d'accord ! J'essaierai de m'en souvenir, comme je fais beaucoup de graphisme... =)

[Threax]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif