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)