Réaliser une barre de navigation interactive Bouton_activeRéaliser une barre de navigation interactive Bouton_hoverRéaliser une barre de navigation interactive Fb-hoverRéaliser une barre de navigation interactive Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Réaliser une barre de navigation interactive EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Réaliser une barre de navigation interactive EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Réaliser une barre de navigation interactive EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Réaliser une barre de navigation interactive EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Réaliser une barre de navigation interactive EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Réaliser une barre de navigation interactive EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Réaliser une barre de navigation interactive EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Réaliser une barre de navigation interactive EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le deal à ne pas rater :
Pokémon EV06 : où acheter le Bundle Lot 6 Boosters Mascarade ...
Voir le deal

Partagez
 

Réaliser une barre de navigation interactive

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://sheppskitdesign.forumactif.com/index.htm
Shepp
Shepp
{ Membre }
{ Membre }

Féminin Messages : 94



Réaliser une barre de navigation interactive Empty

    Bonjour Smile

    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 Réaliser une barre de navigation interactive 577704309


Dernière édition par Shepp le Dim 13 Mai 2012, 06:59, édité 1 fois
MessageSujet: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyDim 13 Mai 2012, 06:34
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Réaliser une barre de navigation interactive Empty
Bonjour,

Pourrais-tu nous poster ton code HTML et CSS (correspondant à l'une de tes solutions) par hasard ?

Merci à toi Wink
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyDim 13 Mai 2012, 06:43
Revenir en haut Aller en bas
http://sheppskitdesign.forumactif.com/index.htm
Shepp
Shepp
{ Membre }
{ Membre }

Féminin Messages : 94



Réaliser une barre de navigation interactive Empty

    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.
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyDim 13 Mai 2012, 06:53
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Réaliser une barre de navigation interactive Empty
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).
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyMar 15 Mai 2012, 14:58
Revenir en haut Aller en bas
Illadon
Illadon
{ Membre }
{ Membre }

Masculin Messages : 126



Réaliser une barre de navigation interactive Empty


Est ce que c'est ça que tu veux?
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyMar 15 Mai 2012, 18:02
Revenir en haut Aller en bas
http://sheppskitdesign.forumactif.com/index.htm
Shepp
Shepp
{ Membre }
{ Membre }

Féminin Messages : 94



Réaliser une barre de navigation interactive Empty

    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 ^.^"
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyMer 16 Mai 2012, 12:27
Revenir en haut Aller en bas
Illadon
Illadon
{ Membre }
{ Membre }

Masculin Messages : 126



Réaliser une barre de navigation interactive Empty
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.
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyMer 16 Mai 2012, 12:41
Revenir en haut Aller en bas
http://cssmania.com
Anoobnyme
Anoobnyme
GOD OF COOKIES

Masculin Messages : 1445



Réaliser une barre de navigation interactive Empty
Hop'

Je pense que tu peux utiliser ce tutoriel aussi : http://www.css-actif.com/t5072-creer-une-image-reactive?highlight=image+interactive !
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyMer 16 Mai 2012, 15:13
Revenir en haut Aller en bas
http://sheppskitdesign.forumactif.com/index.htm
Shepp
Shepp
{ Membre }
{ Membre }

Féminin Messages : 94



Réaliser une barre de navigation interactive Empty

    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é.
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyJeu 17 Mai 2012, 07:31
Revenir en haut Aller en bas
Illadon
Illadon
{ Membre }
{ Membre }

Masculin Messages : 126



Réaliser une barre de navigation interactive Empty
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.
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyJeu 17 Mai 2012, 07:50
Revenir en haut Aller en bas
http://cssmania.com
Anoobnyme
Anoobnyme
GOD OF COOKIES

Masculin Messages : 1445



Réaliser une barre de navigation interactive Empty
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).
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptySam 19 Mai 2012, 09:43
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Réaliser une barre de navigation interactive Empty
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.
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyDim 20 Mai 2012, 10:16
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Réaliser une barre de navigation interactive Empty
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. Smile
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyDim 20 Mai 2012, 10:40
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Réaliser une barre de navigation interactive Empty
Ah oui remarque pertinente les images sont toutes dotées d'un identifiant ça facilite grandement les choses '_' *avait pas remarqué*
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyDim 20 Mai 2012, 11:08
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Réaliser une barre de navigation interactive Empty
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 Réaliser une barre de navigation interactive 926145
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyVen 25 Mai 2012, 06:59
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Réaliser une barre de navigation interactive Empty
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 Réaliser une barre de navigation interactive 926145
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive EmptyMar 29 Mai 2012, 08:38
Revenir en haut Aller en bas
Contenu sponsorisé




Réaliser une barre de navigation interactive Empty
MessageSujet: Re: Réaliser une barre de navigation interactive   Réaliser une barre de navigation interactive Empty
Revenir en haut Aller en bas
 

Réaliser une barre de navigation interactive

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Aide pour ma barre de navigation ( effet barre menu horinzontal )
» <Navigation> Barre de navigation fixée en haut de la fenêtre
» Barre de navigation (CSS)
» Barre de Navigation
» Barre de Navigation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit