Écrasement du texte lors de l'agrandissement d'une image

**bubleguy** · 08/12/2006, 12h40

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>

**Bisûnûrs** · 08/12/2006, 13h40

Passe ton image en position:absolute sur le onmouseover en n'oubliant pas de le repasser en relative sur le onmouseout.

**bubleguy** · 08/12/2006, 14h07

Même en rajoutant respectivement

Code :

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

obj.position = 'absolute';

et

Code :

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

obj.position = 'relative';

dans les fonctions changesizeUP et changesizeDOWN
Cela réagit comme précédemment.

De plus "test2" est toujours au dessous de l'image.
Le moyen de l'obtenir à droite de l'image est de supprimer tout mes div

Code :

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

1
2
3
4
5
 
test1
<img src="./evecomplement/arkonor.png" width="30" height="30" onmouseover="changesizeUP(this)" onmouseout="changesizeDOWN(this)"/>test2
<br />
test3

Mais bon étant donné que le but est d'apprendre CSS vaut mieux utiliser les div

Autre suggestion?

**bubleguy** · 08/12/2006, 16h31

Je pensais qu'avec 2 simple div je pouvais y arriver. Comment m'ensuis-je sorti?
Pour résoudre les problème de taille, d'affichage etc... mettez des couleurs pour les backgrounds et padding à 1 dans ttes vos div. Avec ceci vous pouvez vous reperer et savoir quelle div n'a pas la taille voulu

c'est comme ca que j'ai pu comprendre le fonctionnement des float:left, clear:float etc etc

je donne la solution de mon pb initial pour ceux que ca interesse.

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
 
.imageOverview{
	overflow:visible;
	float:left;
	background-color:#0000CC;
	color:#999999;
	position: absolute;
	z-index: 2 ;
}
.text2{
	position:relative;
	overflow:visible;
	left:"30px";
	width:100%;
	background-color:#FFFFFF;
	z-index: 1 ;
}
.parent{
	background-color:#9900CC;
	padding:"5px";
	width:"400px"
}
.ancetre{
	width:"800px";
	background-color:#009900;
	padding:"15px";
}

Les images qui vont s'agrandir utilisent la class imageOverview

Code HTML :

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
 
 
<div class="ancetre">
	<div class="parent">	
		<div class="imageOverview">
			<img src="./evecomplement/arkonor.png" width="30" height="30" onmouseover="changesizeUP(this)" onmouseout="changesizeDOWN(this)" /><br />
		</div>
		<div class="text2">
			parent1 fils B blablalbalblalbal blaballb al sdf<br />
			parent1 fils B<br />
		</div>
	</div>
	<div class="parent">
		<div class="imageOverview">
			<img src="./evecomplement/arkonor.png" width="30" height="30" onmouseover="changesizeUP(this)" onmouseout="changesizeDOWN(this)" /><br />
		</div>
		<div class="text2">
			parent1 fils B blablalbalblalbal blaballb al sdf<br />
			parent1 fils B<br />
		</div>
	</div>
</div>

On voit qu'il y a beacoup plus de div que dans mon programme initial.

les mots "text2" de mon prog précédent a été changer par "parent1 fils B blablalbalblalbal blaballb al ......"

et "text3" a été supprimé car ca faisait moche d'avoir un texte en dessous d'une image

Écrasement du texte lors de l'agrandissement d'une image

CSS

Discussions similaires

Partager

Partager