| Réaliser une barre de navigation interactive | |
|
Shepp
{ Membre }
Messages : 94
| Bonjour
Ce que je croyais être une simple petite manip' s'est révélé un véritable casse-tête. L'idée était de créer une barre de navigation interactive, intégrée donc au header (au survol de la souris, l'image changerait). Ce qui aurait pu être simple s'il avait été question de la même barre de navigation, invités et membres confondus - un simple mappage sur image avec la barre de navigation toute faite dessus. Vous l'avez compris, ce n'est pas ce que nous voulons. Résultat, il faut placer un à un les éléments, avec leurs propriétés.
J'ai d'abord essayé via des images flottantes. Mais les éléments s'affichent différemment selon les écrans. J'ai essayé un mappage avec OnMouseOver / OnMouseOut ; si la deuxième image s'affiche bel et bien au survol, la première n'apparaît pas, pour une raison qui m'échappe. J'ai essayé de superposer les images avec les css, mais cela crée des conflits pour savoir qui est au premier plan, au deuxième plan... bref, impossible d'afficher tous les éléments sur le même plan.
Bref, si vous avez une solution, ou si l'un des trois problèmes peut être résolu (comme par exemple le OnMouseOut)... ce serait génial
|
Dernière édition par Shepp le Dim 13 Mai 2012, 06:59, édité 1 fois | |
|
| |
Espeon
Administrateur
Messages : 1819
| Bonjour, Pourrais-tu nous poster ton code HTML et CSS (correspondant à l'une de tes solutions) par hasard ? Merci à toi | | |
|
| |
Shepp
{ Membre }
Messages : 94
| Bien, je vous passe le plus "simple" - et celui qui était le plus susceptible de marcher, le mappage, que j'avais placé derrière le <*body> de overall_header ; je ne laisse que le squelette.
- Code:
-
<img src="HEADER" alt="navigmap" usemap="#navigmap" style="border: 0;" id="abc"/> <map name="navigmap"><area shape="rect" coords="COORD1,COORD2,COORD3,COORD4" href="LIEN" target="" alt="TITRE" onMouseOver="document.getElementById('abc').src ='IMAGE2'"onMouseOut="document.getElementById('abc').src = 'IMAGE1'"/> </map> Et sinon, pour superposer les images, j'avais simplement mis une class reliée à mon css en les plaçant différemment sur l'index (1, 2...) Pour les images flottantes, c'était un simple tableau placé en position absolute sur l'index.
| | |
|
| |
Espeon
Administrateur
Messages : 1819
| Hmmmm faut que je regarde ça. Ca donne quoi en live pour le moment ?
Cela dit, je n'ai peut-être pas bien saisi l'effet exact recherché, mais s'il s'agit de faire apparaître une image différente au survol, pourquoi ne pas utiliser des div (voire des a que l'on display: block), des id et du css avec la propriété :hover ?
Sinon en Javascript ce doit être également plus simple (changer la src de l'image au survol, suffit de lui appliquer une class). | | |
|
| |
Illadon
{ Membre }
Messages : 126
| Est ce que c'est ça que tu veux? | | |
|
| |
Shepp
{ Membre }
Messages : 94
| Oui, c'est exactement ça, mais avec en plus un lien et le tout intégré à-même le header puisqu'il est question de la barre de navigation ^.^ J'ai essayé avec le :hover justement, mais pour cela il faut que les images soient toutes sur le même plan au-dessus de l'image de base, or ça crée des conflits (troisième solution).
C'est peut-être plus simple en Javascript, mais je ne maîtrise pas du tout ^.^"
| | |
|
| |
Illadon
{ Membre }
Messages : 126
| Pour le html: - Code:
-
<a id="menu1" url="vers ce que tu as besoin"></a>
- Code:
-
#menu1 { display:block; width: la largeur de ton image; height: la hauteur de ton image; background-image:url("url de ton image") } #menu1:hover{ background-image:url("url de ta seconde image"); } Voilà ce dont tu as besoin, il suffit de ne pas mettre directement mais de l'insérer via le css qui lui est facilement modifiable. | | |
|
| |
Anoobnyme GOD OF COOKIES
Messages : 1445
| Hop'
Je pense que tu peux utiliser ce tutoriel aussi : http://www.css-actif.com/t5072-creer-une-image-reactive?highlight=image+interactive ! | | |
|
| |
Shepp
{ Membre }
Messages : 94
| Je sais déjà comment faire une image réactive, là n'est pas le problème ^.^" De même, pour le css/html c'est très bien, mais ce qu'il me faut, c'est mettre le menu DANS le header (au-dessus, intégré à celui-ci, au pixel près). Pour donner un exemple un peu plus parlant, j'aimerais avoir une barre de navigation comme ici mais avec le :hover en plus (comme, par exemple sur ce même lien, les images qui apparaissent au survol dudit header).
Pour résumer, on aurait le header en fond, par-dessus la barre de navigation avec les éléments, et au survol de ces derniers on aurait une image qui apparaîtrait au pixel près sur le header pour faire comme s'il était animé.
| | |
|
| |
Illadon
{ Membre }
Messages : 126
| T'enléves les images déjà présentes dans la barre de navigation depuis le template, tu utilises les id de chaques éléments du menu et tu appliques les codes que j'ai mis plus haut. Et voilà. Ou si tu préféres pas toucher aux templates - Code:
-
a.mainmenu img{ display:none;}
Et tu utilises le code précédent sur les id de chaque élément du menu. | | |
|
| |
Anoobnyme GOD OF COOKIES
Messages : 1445
| Pour l'image du hover,
Ce que j'ai pu voir, tout est calculé pour. Et donc cette image est calculé pour être a tel endroit. Ce que je peux te conseiller c'est de faire ta bannière avec les bouton présent a travers un autre calque (si tu as photoshop) et lorsque tu as finis ta bannière tu cache toute la bannière mis a part le/les bouton(s) et ensuite tu cache les boutons et tu affiche seulement toute la bannière, ensuite viendra le code. Si tu as un PSD a passer je suis partant pour t'aider (si tu ne comprend pas tout mon charabia). | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Bonjour ! Dans le cas de Goldheart (j'ai dû chercher pour trouver leur navig d'ailleurs XD) les boutons du menu de navigation sont des PNG et forcément s'affichent par dessus le fond de la page. Dans ton cas c'est plus compliqué si tu cherches à avoir des images réactives. Est-ce que tu as tenté avec les sélecteurs CSS ? - Code:
-
a.mainmenu[href="/register"] img {
}
a:hover.mainmenu[href="/register"] img {
} Évidemment, ce ne sera pas compatible avec les vieux navigateurs, mais en principe ça marche avec tous les récents (IE y compris) L'autre solution serait de coder "en dur" les différents liens pour les agencer à ta guise, mais comme tu l'as dit, ça pose problème pour le distingo invités/membres. | | |
|
| |
Doare
{ Spécialiste }
Messages : 544
| J'ai encore du mal à comprendre comment tu veux placer ta navigation. Est-ce qu'à la limite il serait possible d'avoir un schéma ou quelque chose d'approchant ? Autrement la rendre interactive au survol est simple, surtout en utilisant la navigation de base puisque chaque bouton est doté d'une ID permettant d'en cibler l'image. Illadon a déjà expliqué comment changer l'image au survol, il suffit de placer les images dans le CSS. A voir si ce que tu as en tête demande plus ou pas. | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Ah oui remarque pertinente les images sont toutes dotées d'un identifiant ça facilite grandement les choses '_' *avait pas remarqué* | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Hello Shepp(: Le problème est-il toujours d'actualité ? Si nous n'avons pas de réponse dans 4 jours, le sujet sera considéré comme résolu ! Merci de ta compréhension | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Hello Shepp! N'ayant toujours pas obtenu de réponse, je considère le sujet comme résolu ! Si tu as un souci, n'hésite pas à ouvrir un autre sujet (: Merci de ta compréhension | | |
|
| |
Contenu sponsorisé
| |
| |
| Réaliser une barre de navigation interactive | |
|