Discussion :

[ghohm]

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 !

Merci d'avance,
Gôm.

[SpaceFrog]

Code :

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

bj.parentNode.offsetHeight

?

[FremyCompany]

Code :

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

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);

[ghohm]

Bonjour,

pourriez-vous commenter un peu votre code, parce que là j'ai peur de pas tout comprendre !

[SpaceFrog]

lequel ???

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

Code :

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

Objet.parentNode.offsetHeight

Objet étant l'image... àpriori le parentNode sera le div contenant
et son offsetHeight te retourna sa hauteur ...

[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 ?

[SpaceFrog]

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

[ghohm]

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 :

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
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;
}

[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 ...

[ghohm]

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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<script language="JavaScript">
		<!--
		function init(){
			var h = document.images[0].parentNode.offsetHeight - 5;
			var w = document.images[0].parentNode.offsetWidth - 5;			
			document.images[0].height = h;
			document.images[0].width = w;
		}
 
		window.onload = init;
		//-->
	</script>

[SpaceFrog]

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

et ajoute px pour les height et width ...

[ghohm]

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

JS dans XSLT

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
<?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>

CSS

Code :

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

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

[SpaceFrog]

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

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