Récupérer les dimensions de l'élément parent ?

Version imprimable

31/08/2006, 15h29
ghohm

Récupérer les dimensions de l'élément parent ?

Bonjour,

je dois récupérer les dimensions d'un élément <div>, lequel contient une balise <img>.

En effet, je voudrais que mon image fasse "hauteur du <div> moins 1%" par "largeur du <div> moins 1%". Sauf si les dimensions de l'image sont inférieures à celle du <div>, auquel cas les attributs "height" et "width" seraient à "100%" dans <img>.

Peut-être serait-ce plus facile si mes <div> avaient des "id" ?

Je dois bien avouer que je n'y connais rien en JS, mais je dois l'utiliser pour tester mon appli ! :oops:

Merci d'avance,
Gôm.
31/08/2006, 15h34
SpaceFrog

Code:

bj.parentNode.offsetHeight

?

Code:

1
2
3
shape=function(x,y,h,w) { this.x=x; this.h=h; this.y=y; this.w=w; }
var p=h.parentNode;
var s=new shape(p.offsetX, p.offsetY, p.offsetHeight, p.offsetWidth);

31/08/2006, 15h38
ghohm

Bonjour,

pourriez-vous commenter un peu votre code, parce que là j'ai peur de pas tout comprendre ! :?
31/08/2006, 15h41
SpaceFrog

lequel ???

je t'ai juste donné laccès à la propriété offsetHeight du node parent ...

Code:

Objet.parentNode.offsetHeight

Objet étant l'image... àpriori le parentNode sera le div contenant
et son offsetHeight te retourna sa hauteur ...
31/08/2006, 15h41
ghohm

De plus, j'aimerais que le redimensionnement de mon image se fasse au chargement de ma page, sans que le visiteur n'ait rien à faire.

Il faudrait que ce soit totalement tranparent pour lui.

Est-ce possible ?
31/08/2006, 15h50
SpaceFrog

oui c'est possible en lmançant une fonction dasn le onload du body
question subsidiaire ton div est bien en overflow hidden ?

Citation:

Envoyé par SpaceFrog

oui c'est possible en lmançant une fonction dasn le onload du body
question subsidiaire ton div est bien en overflow hidden ?

Non, pourquoi ?

Code:

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
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-color: #fff;
}
.global {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1000px;
	height: 730px;
	margin-top: -365px;
	margin-left: -500px;
}
 
.centre {
	position: absolute;
	width: 990px;
	height: 720px;
	padding: 5px;
	background-color: #FFFFE6;
	border: 2px solid #000000;
}
	.zone1 {
		float: left;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
	.zone2 {
		float: right;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
	.zone3 {
		position: absolute;
		left: 5px;
		bottom: 5px;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
	.zone4 {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 485px;
		height: 350px;
		padding: 2px;
		background-color: orange;
		border: 1px solid #000000;
		text-align: center;
	}
 
#media {
	position: relative;
	left: 50%;
	top: 50%;
	width: 470px;
	height: 340px;
	margin-top: -170px;
	margin-left: -385px;
}

31/08/2006, 15h55
SpaceFrog

parceque si ton image est plus grande que le div le div risque de s'aggrandir et parconséquent le offsetParent sera toujours plus grand que l'image ...

J'ai donc rajouté "overflow: hidden;" à la fin de chaque .zoneN{} dans mon CSS.

Pour en revenir au script JS : je remplace "Objet" : Objet.parentNode.offsetHeight et Objet.parentNode.offsetWidth par quoi ?

Je préfèrerais pas donner d'id à ma balise IMG, car je risque d'en avoir plusieurs.

J'aimerais que le redimensionnement s'applique à toutes mes balises <img>. :?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script language="JavaScript">  </script>
:traine: :oops:

31/08/2006, 16h26
SpaceFrog

une boucle sur document.images de 0 à document.images.length ...

et ajoute px pour les height et width ...

Bon, voici mon code et ça ne fonctionne pas ! :cry:

:arrow: JS dans XSLT

Code:

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
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0" 
			xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
			xmlns:fn="http://www.w3.org/2005/02/xpath-functions">
<xsl:output
			method="html" 
			encoding="ISO-8859-1" 
			doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
			doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
			indent="yes"/>
<xsl:template match="/">
	<html>
		<head>
			<title>Affichage 4 zones</title>
			<link rel="stylesheet" type="text/css" href="modele_3.css"/>
			<script language="JavaScript">
				<!--
					function init(){
						for (i = 0; i < document.images.length; i++){
							var image = document.images[i];
							if (image.height >= image.parentNode.offsetHeight) {
								image.height = image.parentNode.offsetHeight - 10px;
							}
							if (image.width >= image.parentNode.offsetWidth) {
								image.width = image.parentNode.offsetWidth - 10px;
							}
						}
					}
					
					window.onload = init;
				//-->
			</script>
		</head>
		<body>
			<div class="global">
				<div class="centre">
						<div class="zone1">
							<xsl:apply-templates select="//zone[position()=1]"/>
						</div>
						<div class="zone2">
							<xsl:apply-templates select="//zone[position()=2]"/>
						</div>
						<div class="zone3">
							<xsl:apply-templates select="//zone[position()=3]"/>
						</div>
						<div class="zone4">
							<xsl:apply-templates select="//zone[position()=4]"/>
						</div>
				</div>
			</div>
		</body>
	</html>
</xsl:template>

<xsl:template match="zone">
	<xsl:variable name="ext"><xsl:value-of select="substring-after(./@chemin,'.')"/></xsl:variable>
	<xsl:if test="./@media = 'video'">
		[...]
	</xsl:if>
	<xsl:if test="./@media = 'image'">
		<img src="{./@chemin}" alt="Une image promotionnelle" /><!-- height et width sont dans le CSS -->
	</xsl:if>
	<xsl:if test="./@media = 'flash'">
		[...]
	</xsl:if>
</xsl:template>
</xsl:stylesheet>

:arrow: CSS

Code:

1
2
3
4
img {
	width: auto;
	height: auto;
}

02/09/2006, 10h22
SpaceFrog

fais des alert sur les offsetWidth récupérés .. teste tes égalités ...

ajoute "px" pour les attributions de tailles ...