Discussion :

[Dsphinx]

Bonjour (j'essaie le CSS car c'est pas mal du tout mais j'ai un prob)

J'ai un menu horizontal qui comporte des sous-menus qui s'affiche au rollover mais j'aimerais que lorsque l'on passe sur le menu il affiche les sous-menus et que l'image du menu fasse aussi un rollover. Je voudrais que lorsqu'on passe sur l'image du menu, cette dernière change et fasse apparaitre les sous-menus. Mon prob est que l'image disparait lorsque je passe dessus ! (si je ne mets pas l'image dans le menu, le rollover de cette dernière fonctionne sans prob, c'est uniquement lorsque je la met dans le menu qu'elle disparait ! Voici le code 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/* CSS du menu horizontal, bieler batiste */
 
.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
    }
 
.menu ul{
    position:absolute;
    display:block;
    width:124px;
    /*margin:0;*/
    padding:0;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
.menu li li ul{
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    }
 
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
 
.menu li li{
    display:block;
    float:none;
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
.menu a{
    text-align:center;
    background-color: #9cf;
    border:0px #666 solid;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:2px 0;
    margin:0px;
    }
 
.menu a:hover{
    background-color: #eee;
    border:0px #aaa solid;
    }
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}
 
a.linkOver{
    background-color: #eee;
    }
 
a.image { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 100px; /* largeur de l'image réactive */
     height: 100px; /* hauteur de l'image réactive */
     background-image: url(home.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
 
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(home2.jpg); /* source de l'image d'arrivée */
     }

et voici le code de ma page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
 
<ul id="menu">
    <li><a class="image" title="desc" href="lien.htm"></a>
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a>
                        <ul>
 
...

J'ai repris le code mais c'est pas facile. A coté j'ai un fichier javascript mais il est pas important pour mon problème.

Merci beaucoup de vos réponses !

[Auteur]

bonjour,

En faisant comme ceci (je répète dans le hover, les propriétés de la classe image)?

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
 
a.image { /* définition de la classe "image" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 100px; /* largeur de l'image réactive */
     height: 100px; /* hauteur de l'image réactive */
     background-image: url(home.jpg); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
 
a.image:hover {      
     display: block; 
     width: 100px; 
     height: 100px;
     background-image: url(home2.jpg); 
     background-repeat: no-repeat;
     }

[Dsphinx]

Merci de ta réponse... Mais ca ne fonctionne pas, l'image disparait encore lorsque je passe dessus ! C'est ennuyeux !

[Auteur]

as-tu essayé ceci (c'est un "vrai" roll-over) :

Code :

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

1
2
3
4
 
<a class="image" title="desc" href="lien.htm">
<img src="home.jpg" onmouseover="this.src='home2.jpg'" onmouseout="this.src='home.jpg'">
</a>

et

Code :

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

1
2
3
4
 
a.image{
 display: block;
}

Les attributs concernant les dimensions et le background sont maintenant inutiles.