Bonjour,
j'explique mon problème:
dynamiquement je récupère des photos et leurs description d'une base de donnée. L'image est reduite à l'affichage pour permettre à l'U. de lire le texte.
Qd il passe la souris sur l'image, celle-ci s'agrandit. Le problème est que lorsque l'image s'angrandit, elle me pousse le texte du coté et du dessous.
Je souhaite que l'image passe simplement par dessus l'ensemble des textes, et que la div de class "description doit etre a droite de l'image".
Merci pour votre aide, je capte rien en CSS (la theorie c'est à peu près ok mais la pratique).
Voici un exemple concret.
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 <html> <head> <style type="text/css"> .text{ position: relative ; z-index: 1 ; } .description{ position: relative ; font-family: Arial, Helvetica, sans-serif; z-index: 1 ; } .image{ position: relative ; width: "30px"; height : "30px"; z-index: 2 ; overflow:visible; } </style> <script language="javascript"> function changesizeUP(obj){ obj.width = 70; obj.height = 70; } function changesizeDOWN(obj){ obj.width = 30; obj.height = 30; } </script> </head> <body > <div class="text">test1</div> <div class="image"> <img src="./evecomplement/arkonor.png" width="30" height="30" onmouseover="changesizeUP(this)" onmouseout="changesizeDOWN(this)"/></div><div class="description">test2</div> <br /> <div class="text">test3</div> </body> </html>
Partager