Discussion :

[Drone]

Bonjour, j'ai commencé à apprendre le xhtml et css hier c'est dire à quel point je nage dans la semoule, et là j'ai un petit problème, je pense que je cherche peut être trop compliqué pour le résultat voulu.

Mon problème :

J'aimerais que mon menu change de background lorsque ma souris survole les liens du menu.

C'est à dire que mon menu possède un background, et que des que je passe ma souris sur une des parties du menu, j'aimerais que le background change.

J'ai une class top_menu pour placer mon menu ou je le souhaite.
Et à l'intérieur j'ai mis plusieurs class element_x pour pouvoir modifier comme je l'entend chaque partie de mon menu.

Voici la partie html intéressé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="topmenu">  
 
        <span class="element_1"><a href="Index.html"><img src="images/logo_maison.gif"alt="logo_maison"/></a>
        </span>   
 
        <span class="element_2"><a href=Page2.html>Partie2</a>             
        </span>  
 
        <span class="element_3"> <a href=Page3.html>Partie3</a>              
        </span>   
 
      </div>

Et voilà la partie CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#topmenu {
width : 280px;
height: 70px;
position:absolute;
z-index:1;
top:20px;
left:350px;
right:2px;
background-image: url("images/topmenu.jpg");
}
 
.element_1 {
position:absolute;
margin-left: 2%;
}
 
}
.element_2 {
position:absolute;
top:20px;
margin-left : 32 %;
}
 
#topmenu .element_1 a:hover {
background-image: url("images/menu1.jpg"}

Sur les deux dernières lignes CSS du dessus on peut voir ma pauvre tentative pour changer le background mais bien entendu ça ne fonctionne pas.


Help please, Merci.

[Lideln75]

Salut,

C'est quelle image de fond que tu veux changer ? Celle du div, celle des spans, ou celle des anchors ?

Je ne saurais que trop te conseiller de parcourir des tutoriels sur la création de menus.

Bon courage

[Drone]

Bonjour, en fait j'aimerais changer l'image de fond du div, quant ma souris survole une balise <a> qui se trouve sur un span.

Merci pour ton lien qui est tout de même intéressant, j'étais justement sur le même genre de tuto.

[Lideln75]

Si tu changes l'image de fond du div, ça changera toute la barre de menu...
Bref en tous cas je suis pas sûr que ça doit être très facile. Enfin je veux surtout dire au niveau portabilité.
Parce qu'un petit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
div:hover
{
    background-image: blabla;
}

C'est facile, mais ça marche ptet pas sous IE (je crois qu'IE ne reconnaît les hover que sur les anchor). Ou alors faut utiliser un ptit script CSS spécial pour qu'IE reconnaisse le :hover sur d'autres éléments.
Ou encore : tu peux le faire en javascript.

Voilà bon courage !

[Drone]

En fait oui je veux changer à chaque fois toute la barre du menu mais qu'avec un "z-index:1" le menu reste en dessous de mes span qui auront un "z-index:2".
C'est pour essayer un effet spécial, mais bon.

Le #div:hover ne me conviendrait pas car le background changerait quant la souris passe sur tout le menu, alors qu'il faut quelle change juste pour les élément du menu, c'est pour ça je cherchait plus une syntaxe comme #div span a:hover {background-image..} mais celle là ne semble pas fonctionner.

En tout cas merci pour ton aide.

[Lideln75]

Je vois pas le rapport avec les z-index... ??

De plus, ton menu (div) est ton conteneur, il sera forcément toujours en dessous des span...

Et enfin, il n'est pas possible (je crois) de spécifier un attribut d'un parent via un sélecteur CSS.

Il te faut utiliser du javascript.

Du genre, en jquery (framework pour te simplifier la vie en JS) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
// Ce code s'exécute quand le document a fini de charger
$(document).ready(function()
{
    // On parcourt tous les span contenus dans topmenu, et pour chacun on affecte une fonction hover() qui prend deux fonctions (callbacks) en argument.
    $('#topmenu span').hover(
                                        // Callback appelé quand la souris arrive sur l'élement
                                        function()
                                        {
                                             $(this).parent().addClass('classHover');
                                        },
                                        // Callback appelé quand la souris quitte l'élément
                                        function()
                                        {
                                             $(this).parent().removeClass('classHover');
                                        }
});

Voilà, grosso modo !

A+

EDIT : bien entendu, "classHover" est un nom de classe que tu crées, et qui sera affecté au menu ($(this) ça représente le span, et donc $(this).parent() ça représente le parent du span, donc topmenu).
Dans cette classe, tu dois mettre à jour ton image de background.
Je te conseille d'utiliser la technique des tiroirs (une seule image .jpg contenant l'une en dessous de l'autre les images "normal" et "hover" de ton menu, et tu affiches la bonne grâce à background-position)

[Drone]

Merci pour ces informations !

Je suis pas sur d'avoir tout bien compris, "this" et "parent" représentent deux variables déjà écrites dans le framework jquery, de la même manière que la méthode addclass ?

Classhover est une classe créé en java ou une class style un div qui doit être de même proportion que mon div #topmenu ?

Donc au passage de la souris, création de la classe puis destruction, ça n'a pas l'air très compliqué.

Pour le moment comme je suis en mode apprentissage je n'écris rien d'autre que du xhtml et du css, et j'ai du opter pour une liste déroulante horizontale avec des <li> flottants.
Mais dans une semaine je devrais avoir attaqué le javascript et là j'essaierais vite ta solution donc merci beaucoup !

Pour la technique des miroirs, je me demandais pour mon menu qui doit avoir 4 backgrounds différents, les images seront toutes chargés les une derrières les autres au début ? Par rapport au temps de chargement peut être la solution de les charger juste au moment du hover serait mieux ? J'essaierais les deux pour voir.

Merci.

[Lideln75]

Merci pour ces informations !

De rien

Je suis pas sur d'avoir tout bien compris, "this" et "parent" représentent deux variables déjà écrites dans le framework jquery, de la même manière que la méthode addclass ?

Mmmh si tu ne connais pas javascript, enfin tout du moins si tu ne comptes pas l'utiliser sur ton site, oublie. Mais si tu comptes t'y mettre, jQuery est ton ami !
Dans ce cas, tu apprendras dans les tutoriaux que $() est l'opérateur jQuery. "this" est l'objet (DOM) courant, donc $(this) te retourne un objet jQuery. Et parent() est une fonction qui te retourne l'élément parent.
M'enfin si tu connais pas Javascript, mieux vaut y aller en douceur (parcours des tutoriaux par exemple)

Classhover est une classe créé en java ou une class style un div qui doit être de même proportion que mon div #topmenu ?

classHover est un nom de classe CSS que j'ai choisir au hasard. En fait tu auras ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#topMenu
{
    blablabla (tout ce que tu veux)
    background-image: url('mon/image/tiroir.jpg');
    background-position: left top;
    background-repeat: repeat-x; /* si jamais c'est une image qui se répète */
}
 
#topMenu.classHover
{
    background-position: left bottom;
}

En fait pourquoi utiliser cette technique ? Cela permet de ne pas télécharger l'image quand ta souris passe sur un élément (car il y a un temps de latence dû au téléchargement, et du coup ton menu n'aura pas de background pendant ce laps de temps).
Donc ton fichier image doit en fait contenir les deux images de ton menu, l'une au dessous de l'autre.

Donc au passage de la souris, création de la classe puis destruction, ça n'a pas l'air très compliqué.

Oui voilà, au passage de la souris, on ajoute la classe "classHover" à l'élément ayant pour ID "topMenu" ("#" veut dire ID, et "." veut dire classe).
Et en sortant de l'élément on supprime la classe, du coup on revient à l'état initial.

Pour le moment comme je suis en mode apprentissage je n'écris rien d'autre que du xhtml et du css, et j'ai du opter pour une liste déroulante horizontale avec des <li> flottants.

Dans ce cas je te conseille encore une fois les tutoriaux que je t'ai donnés.
Ce que tu cherches à faire est impossible je crois en CSS pur.
(mais bon, choisir de changer l'apparence de toute la barre quand on passe sur un élément, au lieu de juste l'élément en lui-même, c'est peu courant )

Mais dans une semaine je devrais avoir attaqué le javascript et là j'essaierais vite ta solution donc merci beaucoup !

Ah ben voilà, les choses sérieuses vont commencer ^^

Pour la technique des miroirs, je me demandais pour mon menu qui doit avoir 4 backgrounds différents, les images seront toutes chargés les une derrières les autres au début ? Par rapport au temps de chargement peut être la solution de les charger juste au moment du hover serait mieux ? J'essaierais les deux pour voir.

Miroirs, j'ai dit miroirs ? Non non, tiroirs (enfin, je crois :p )
Pourquoi ton menu doit-il avoir 4 backgrounds différents ?
Et bien, une image c'est pas grand chose à charger, mais quand tu passes ta souris sur un élément, et que pendant une demi seconde ton élément n'a plus de background, ça se voit, et c'est pas bieeeeeennnn !
Si tu veux utiliser 4 images, tu peux utiliser les pourcentages dans "background-position". Du genre :
background-position: 0 0 --> te donnera la première image
background-position: 0 33% --> te donnera la deuxième image
background-position: 0 66% --> te donnera la troisième image
background-position: 0 100% --> te donnera la dernière image

Merci.

De rien

C'est quoi ce truc, vous DEVEZ faire un menu dont la barre totale change de couleur quand on passe la souris sur un élément (et uniquement sur un élément) ?

Parce qu'en pur CSS, franchement j'ai pas envie de dire de bêtise, mais je pense que c'est pas possible (enfin j'ai bien une solution en tête mais c'est crâde et ça demande de connaître la taille des différents éléments etc.)

[Drone]

Je ne connais pas Javascript mais j'ai fait un peu de VB il y a longtemps le $(this) me fait un peu penser à un Me![objet].

Pour mon menu à liste déroulante je l'ai fait, mais bon j'me suis bien aidé d'un tuto.

Ça m'a l'air d'être un super conseil le pourcentage dans le background-position !

C'est quoi ce truc, vous DEVEZ faire un menu dont la barre totale change de couleur quand on passe la souris sur un élément (et uniquement sur un élément) ?

Parce qu'en pur CSS, franchement j'ai pas envie de dire de bêtise, mais je pense que c'est pas possible (enfin j'ai bien une solution en tête mais c'est crâde et ça demande de connaître la taille des différents éléments etc.)

Il n'y a rien que je dois obligatoirement faire, je me suis imaginé un menu qui changerait complètement sans me demander si c'était faisable ou même efficace..

Je veux pas plus te déranger mais serais curieux de connaitre ton idée, surtout si tu dis c'est crade, en tant que débutant d'un je ne verrais pas que c'est crade et de deux ca signifie peut être que c'est du code maison et c'est intéressant.

Les éléments n'ont pas de taille définis comme je possède les fichier .psd, je peux modifier au besoin.

Merci bien.

[Lideln75]

Non ma solution crade nécessite que tu connaisses la taille de tes éléments et leur position.

L'idée c'est de jouer avec les z-index, les tailles, les text-indent...

Par exemple, on pourrait penser à faire en sorte que tous les éléments du menu aient un background transparent par défaut et on un z-index 2, et que la barre ait l'image neutre. Lors du survol d'un élément, on lui fout un z-index 1, du coup il passe derrière les autres. Quel intérêt ? Et bien on lui met une taille 100%, et un background "actif" (du coup on ne voit plus la barre de menu, et on croit que c'est elle... mais non ). Bien sûr pour que le texte soit toujours au même endroit, c'est là que ça coince...
Il faut obligatoirement (enfin, à première vue... ) connaître les positions des éléments. Ainsi, pour l'élément 3, si l'élément 1 fait 30px et l'élément 2 fait 50px, alors le text-indent de l'élément 3 sera de 80px (bien sûr chaque élément aura sa propre classe pour gérer les images et l'indent). Et le texte se trouvera donc toujours à la même place, malgré la nouvelle taille de l'élément (enfin yaura un peu de tweak à faire).

Voilà en gros l'idée. Mais comme je disais :
1) c'est crade
2) ça nécessite de connaître la taille des autres éléments.

Je te conseille de rester sur un menu "normal", où ce sont les éléments qui changent de tronche quand on passe la souris dessus, c'est d'une part le plus commun, et ensuite le plus facile

Bonne soirée !

[Drone]

Oula oui en effet c'est pas mal du tout comme idée, je testerais et si jamais ça rend bien je t'en verrais un mp. Merci beaucoup en tout cas.