Découpe d'image : Problème d'alignement

**Cain Marko** · 31/01/2009, 12h00

Bonjour à tous.

J'ai cherché dans les anciens messages une possible solution à mon souci mais sans succès alors….

Je ne suis pas vraiment débutant en html mais j'ai encore beaucoup de lacunes.

J'essais de créer un page avec une image principale découpée en morceaux de 150*150 px. Ceci parce que certaines cellules sont soumises à un lien et un script.

1er problème rencontré : Alors que j'ai découpé mon image avec The Gimp au pixel près, toutes les images des cellules de gauche étaient 1px plus grande. Je n'ai pas compris pourquoi mais j'ai réglé le souci en recoupant.

Suite à ça, sous IE, les deux premiers tableaux sont nickels mais sous Firefox, il reste un espace entre les lignes.

2em problème auquel je ne trouve pas de solution : dès que je rentre un lien et/ou les codes script la composition éclate. Tableaux 3 et 4.

J'aimerais savoir s'il y a un moyen de régler ce souci ou si je dois abandonner cette présentation?

Je précise qu'au final, il ne restera que le dernier tableau. Les autres ne sont là que pour tester et mettre en forme.

Merci d'avance.

http://pagesperso-orange.fr/fantasy3...interieur.html

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
	<head>
		<title>La boutique du Petit Peuple</title>
		<style type="text/css" media="screen">
			body {
					background-color: #4C0D0C;
					scrollbar-arrow-color: #FF0000;
					scrollbar-3dlight-color: #FF0000;
					scrollbar-highlight-color: #FF0000;
					scrollbar-face-color: #6C0D0C;
					scrollbar-shadow-color: #580000;
					scrollbar-darkshadow-color: #580000;
					scrollbar-track-color: #4C0D0C;
				}
 
				/*Mise en forme générale des textes*/
				font,th,td,p { font-family: Comic sans Ms, Verdana, Arial, Helvetica, sans-serif }
				.gen { font-size : 13px; }
				.genmed { font-size : 11px; }
				.gensmall { font-size : 10px; }
				.gen,.genmed,.gensmall { color : #000000; }
				a.gen,a.genmed,a.gensmall { color: #404040; }
				a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: #00FFFF; text-decoration: overline;}
 
				/*Mise en forme spéciale des textes*/
				.infos { font-size: 11px; color :#FFFFFF; }
				a.infos { font-size: 11px; color: #00FFFF; }
		</style>
		<script language="javascript" src="bulle.js"></script>
		<SCRIPT LANGUAGE="JavaScript">
			if(document.images)
			{
			i705485 = new Image;
			i705485 = "images/intobj.jpg";
			}
			{
			i705486 = new Image;
			i705486 = "images/intpoud.gif";
			}
			{
			i705487 = new Image;
			i705487 = "images/intpom.jpg";
			}
			{
			i705488 = new Image;
			i705488 = "images/intbot.jpg";
			}
			</SCRIPT>
	</head>
 
	<body>
		<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
			<tbody>
			<tr>
				<td><img src="images/11.jpg" width="100%" border="0" /></td>
				<td><img src="images/12.jpg" width="100%" border="0" /></td>	
				<td><img src="images/intobj.jpg" width="100%" border="0" /></td>
				<td><img src="images/14.jpg" width="100%" border="0" /></td>
				<td><img src="images/15.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/intpoud.jpg" width="100%" border="0" /></td>
				<td><img src="images/22.jpg" width="100%" border="0" /></td>	
				<td><img src="images/23.jpg" width="100%" border="0" /></td>
				<td><img src="images/24.jpg" width="100%" border="0" /></td>
				<td><img src="images/25.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/31.jpg" width="100%" border="0" /></td>
				<td><img src="images/32.jpg" width="100%" border="0" /></td>	
				<td><img src="images/33.jpg" width="100%" border="0" /></td>
				<td><img src="images/34.jpg" width="100%" border="0" /></td>
				<td><img src="images/intpom.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/41.jpg" width="100%" border="0" /></td>
				<td><img src="images/intbot.jpg" width="100%" border="0" /></td>	
				<td><img src="images/43.jpg" width="100%" border="0" /></td>
				<td><img src="images/44.jpg" width="100%" border="0" /></td>
				<td><img src="images/45.jpg" width="100%" border="0" /></td>
			</tr>
			<tbody>
		</table>
<br>
		<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
			<tbody>
			<tr>
				<td><img src="images/11.jpg" width="100%" border="0" /></td>
				<td><img src="images/12.jpg" width="100%" border="0" /></td>	
				<td><img src="images/etoil13.gif" width="100%" border="0" /></td>
				<td><img src="images/14.jpg" width="100%" border="0" /></td>
				<td><img src="images/15.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/etoil21.gif" width="100%" border="0" /></td>
				<td><img src="images/22.jpg" width="100%" border="0" /></td>	
				<td><img src="images/23.jpg" width="100%" border="0" /></td>
				<td><img src="images/24.jpg" width="100%" border="0" /></td>
				<td><img src="images/25.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/31.jpg" width="100%" border="0" /></td>
				<td><img src="images/32.jpg" width="100%" border="0" /></td>	
				<td><img src="images/33.jpg" width="100%" border="0" /></td>
				<td><img src="images/34.jpg" width="100%" border="0" /></td>
				<td><img src="images/etoil35.gif" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/41.jpg" width="100%" border="0" /></td>
				<td><img src="images/etoil42.gif" width="100%" border="0" /></td>	
				<td><img src="images/43.jpg" width="100%" border="0" /></td>
				<td><img src="images/44.jpg" width="100%" border="0" /></td>
				<td><img src="images/45.jpg" width="100%" border="0" /></td>
			</tr>
			<tbody>
		</table>
<br>
	<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
			<tbody>
			<tr>
				<td><img src="images/11.jpg" width="100%" border="0" /></td>
				<td><img src="images/12.jpg" width="100%" border="0" /></td>	
				<td>
					<a href="objets.html">
						<img src="images/etoil13.gif" width="100%" border="0" />
					</a>
				</td>
				<td><img src="images/14.jpg" width="100%" border="0" /></td>
				<td><img src="images/15.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td>
					<a href="poudres.html">
						<img src="images/etoil21.gif" width="100%" border="0" hspace=/>
					</a>
				</td>
				<td><img src="images/22.jpg" width="100%" border="0" /></td>	
				<td><img src="images/23.jpg" width="100%" border="0" /></td>
				<td><img src="images/24.jpg" width="100%" border="0" /></td>
				<td><img src="images/25.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/31.jpg" width="100%" border="0" /></td>
				<td><img src="images/32.jpg" width="100%" border="0" /></td>	
				<td><img src="images/33.jpg" width="100%" border="0" /></td>
				<td><img src="images/34.jpg" width="100%" border="0" /></td>
				<td>
					<a href="aliments.html">
						<img src="images/etoil35.gif" width="100%" border="0" />
					</a>
				</td>
			</tr>
			<tr>
				<td><img src="images/41.jpg" width="100%" border="0" /></td>
				<td>
					<a href="textiles.html">
						<img src="images/etoil42.gif" width="100%" border="0" />
					</a>
				</td>	
				<td><img src="images/43.jpg" width="100%" border="0" /></td>
				<td><img src="images/44.jpg" width="100%" border="0" /></td>
				<td><img src="images/45.jpg" width="100%" border="0" /></td>
			</tr>
			<tbody>
		</table>
<br>
	<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
			<tbody>
			<tr>
				<td><img src="images/11.jpg" width="100%" border="0" /></td>
				<td><img src="images/12.jpg" width="100%" border="0" /></td>	
				<td>
					<a class="rouge" onmouseover="this.className='rougeOver';infBul('Que des beaux <b>OBJETS</b> utiles ici!!!!'); i705485.src='images/intobj.jpg'" onmouseout="this.className='rouge';infBul(0); i705485.src='images/etoil13.gif'" href="objets.html">
					<img src="images/etoil13.gif" width="100%" border="0" NAME="i705485" ALT="Objets" />
					</a>
				</td>
				<td><img src="images/14.jpg" width="100%" border="0" /></td>
				<td><img src="images/15.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td>
					<a class="rouge" onmouseover="this.className='rougeOver';infBul('Snif! Snif! ATCHOUMMMMM!!!!<br>Brrrr!! Toutes les <b>POUDRES</b> sont ici'); i705486.src='images/intpoud.jpg'" onmouseout="this.className='rouge';infBul(0); i705486.src='images/etoil21.gif'" href="poudres.html">
					<img src="images/etoil21.gif" BORDER="0" NAME="i705486" ALT="Poudres" />
					</a>
				</td>
				<td><img src="images/22.jpg" width="100%" border="0" /></td>	
				<td><img src="images/23.jpg" width="100%" border="0" /></td>
				<td><img src="images/24.jpg" width="100%" border="0" /></td>
				<td><img src="images/25.jpg" width="100%" border="0" /></td>
			</tr>
			<tr>
				<td><img src="images/31.jpg" width="100%" border="0" /></td>
				<td><img src="images/32.jpg" width="100%" border="0" /></td>	
				<td><img src="images/33.jpg" width="100%" border="0" /></td>
				<td><img src="images/34.jpg" width="100%" border="0" /></td>
				<td>
					<a class="rouge" onmouseover="this.className='rougeOver';infBul('Miam! Miam!! Que des bons<br> <b>ALIMENTS</b> pour le ventre!'); i705487.src='images/intpom.jpg'" onmouseout="this.className='rouge';infBul(0); i705487.src='images/etoil35.gif'" href="aliments.html">
					<img src="images/etoil35.gif" BORDER="0" NAME="i705487" ALT="Aliments" />
					</a>
				</td>
			</tr>
			<tr>
				<td><img src="images/41.jpg" width="100%" border="0" /></td>
				<td>
					<a class="rouge" onmouseover="this.className='rougeOver';infBul('Super les <b>TEXTILES</b>!<br>Ca va être la classe!'); i705488.src='images/intbot.jpg'" onmouseout="this.className='rouge';infBul(0); i705488.src='images/etoil42.gif'" onclick="this.className='rouge';" href="textiles.html">
					<img src="images/etoil42.gif" BORDER="0" NAME="i705488" ALT="Textiles" HSPACE="0" VSPACE="0" />
					</a>
				</td>	
				<td><img src="images/43.jpg" width="100%" border="0" /></td>
				<td><img src="images/44.jpg" width="100%" border="0" /></td>
				<td><img src="images/45.jpg" width="100%" border="0" /></td>
			</tr>
			<tbody>
		</table>		
<br><br>
		<div align="center">
			<span class="infos">image : "Methuselah of Redwall" de Richard Sardinha sur <a href="http://www.epilogue.net/index.php" target="_blank" style="color: #00FFFF"> www.epilogue.net</a></span>
		</div>
	</body>
</html>

**blueice** · 31/01/2009, 12h36

Tu peux nous montrer le rendu souhaité... parce que chez moi tout est en vrac et je vois pas ce que tu veux arriver à faire.

**Cain Marko** · 31/01/2009, 14h06

J'aimerais que le final soit comme l'image 1, avec sur les cellules à étoiles, un lien vers d'autres pages et en plus 2 scripts; L'un change l'image et l'autre affiche une info bulle.

Le souci est que dès que je mets les liens j'ai l'image 2 et si j'ajoute les codes script, j'ai l'image 3.

Pour info, les images ont été faites sur IE. Sur FF, j'ai un petit espace entre les cellules de la colonne la plus à gauche.

http://pagesperso-orange.fr/fantasy31/image1.jpg

http://pagesperso-orange.fr/fantasy31/image2.jpg

http://pagesperso-orange.fr/fantasy31/image3.jpg

Découpe d'image : Problème d'alignement

HTML

Discussions similaires

Partager

Partager