Bonjour,
Voilà mon problème c'est que sur la page que je suis en train de développer il y a une partie qui est dans un <div> dont je voudrais supprimer la scrollbar pour la remplacer par deux images (une au dessus de la zone et l'autre en dessous) afin que lorsque l'on passe la souris sur l'image du haut le texte remonter et inversement pour lorsque l'on passe la souris sur celle du bas.
Voilà ma partie de code :
HTML :
Voilà pour la partie html, j'ai enlevé une partie du texte pour l'alléger car sinon dans chaque texte entouré d'un span en cliquant ca fait apparaitre un text en dessous.
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 <div id="param"> <img class="zone" src="../images/Parametres/zoneParam.gif"/> <div id="titre"> <p>Paramètres du compte</p> </div> <div id="flecheHaut"> <img id="fh" class="zone" src="../images/Parametres/flecheHaut.jpg" onmouseover="changerImg('fh','../images/Parametres/flecheHautSelect.jpg');" onmouseout="changerImg('fh','../images/Parametres/flecheHaut.jpg');"/> </div> <div id="paramBlanc"> <img class="zone" src="../images/Parametres/zoneParamBlanc.gif"/> <div id="paramText"> <p> <span class="lienParam">--- Nom -------------------------</span><br/> <span class="lienParam">--- Date de naissance ---------</span><br/><br/> <span class="lienParam">--- Ville -------------------------</span><br/><br/> <span class="lienParam">--- Ecole d'appartenance -----</span><br/><br/> <span class="lienParam">--- CV ---------------------------</span><br/><br/> <span class="lienParam">--- Photo de profil -------------</span><br/><br/> <span class="lienParam">--- Catégorie principale -------</span><br/><br/> <span class="lienParam">--- Sous catégorie --------------</span><br/><br/> <span class="lienParam">--- Projet ------------------------</span><br/> </p> </div> </div> <div id="flecheBas"> <a href="#" onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);"><img id="fb" class="zone" src="../images/Parametres/flecheBas.jpg" onmouseover="changerImg('fb','../images/Parametres/flecheBasSelect.jpg');moveLayer(-1);" onmouseout="changerImg('fb','../images/Parametres/flecheBas.jpg');"/></a> </div> </div>
Voilà mon 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105 #paramMenu { position:absolute; top:1%; width:80%; height:7%; margin-left:10%; } .menuParam { width:50%; border:0; } #zoneParam { position:absolute; top:7%; width:80%; margin-left:10%; } #param { position:absolute; top:5%; width:56%; height:80%; margin-left:22%; } #titre { position:absolute; top:1%; width:100%; text-align:center; color:white; font-size:x-large; font-weight:bold; } #paramBlanc { position:absolute; top:15%; width:80%; height:77%; margin-left:10%; overflow:hidden; } .zone { border:none; width:100%; height:100%; } #flecheHaut { position:absolute; top:10%; width:10%; height:5%; margin-left:45%; } #flecheBas { position:absolute; top:93%; width:10%; height:5%; margin-left:45%; } #paramText { position:absolute; top:2%; width:100%; height:95%; text-align:center; font-weight:bold; } .lienParam { color:black; font-size:large; } .lienParam:hover { color:grey; } a { text-decoration:none; }
Partager