Réalisation d'un zoom au survol de l'image

**lelapinou** · 19/05/2007, 11h03

Salut à tous. Je suis à la recherche d'un petit coup de main, avant de me balancer par la fenêtre. Je ne vais pas dire que je débute, mais je suis loin d'être un expert en développement de sites. Je me débrouille un peu.
Je suis en pleine réalisation d'un site pour un ami. j'ai plusieurs requêtes; je sais j'abuse... mais c'est pas souvent.
Le site se trouve à SigaArtCréation
Première question:
Je me suis rendu compte que mon texte de revenait pas à la ligne sous IE, alors que sous FF oui, d'où cela peut il venir. J'ai été obligé d'ajouter à mon code des '<br>' (cf page Accueil).
Deuxième question (et la plus importante):
je suis entrain de réaliser un zoom lors du passage de la souris sur des images. J'ai trouvé un bout de code que j'ai adapté.
Par contre le résultat n'est déjà pas le même entre IE et FF, et dans les deux cas de toute façon le résultat est loin d'être satisfaisant. Par exemple sous FF, ma zone d'affichage des images est correcte (cadre bordeaux) alors que sous IE, il disparait en hauteur. Ensuite pour le survol, sous IE les zooms sur les images de la 4ème colonne disparaissent, alors que sous FF, ils n'apparaissent même pas.
Alors ma requête est de savoir si quelqu'un de trè très généreux et adorable pouvait scruter mon source et me dire cce qui ne va pas. Me jetez pas de pierres, c'est déjà assez douloureux comme ça.
voici le source de ma page qui affiche les images :

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
 
<?php
session_start();
include('config.inc');
 
$base = mysql_connect ($host, $user, $mdp); 
mysql_select_db ($db, $base);
 
// on teste si une entrée de la base contient ce couple login / pass
$sql = 'SELECT count(id) FROM siga_collection';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$row = mysql_fetch_array($req);
$total = $row[0];
mysql_free_result($req);
 
// on teste si une entrée de la base contient ce couple login / pass
$sql = 'SELECT id,nom_coll,img_coll FROM siga_collection';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
 
?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Siga-Art-Cr&eacute;ation : toutes nos collections de cartes haut de gamme</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />	
		<style type="text/css">
			<!--
			.Style1 {
				font-family: Arial, Helvetica, sans-serif;
				font-weight: bold;
				font-size: 15px;
			}
			.Style3 {font-size: 11px; font-family: Arial, Helvetica, sans-serif;}
			.Style5 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 17px; }
			.Style6 {font-size: 14px}
			.Style8 {
				font-family: "Times New Roman", Times, serif;
				font-weight: bold;
				font-size: 20px;
				font-style: italic;
				color: #660000;
			}
			.Style9 {
				font-family: "Times New Roman", Times, serif;
				font-size: 11px;
			}
			.Style10 {color: #660000}
			.Style11 {
				font-size: 9px;
				font-style: italic;
			}
			-->
		</style>						
	</head>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" rightmargin="0">
<center>		
	<script language="JavaScript" type="text/javascript">
	iens6=document.all||document.getElementById
	ns4=document.layers
	var speed=10
	if (iens6){
	document.write('<div align="center" id="container" style="position:relative;width:95%;height:95%;overflow:hidden;border:1px solid #660000">')
	document.write('<div align="center" id="content" style="position:absolute;width:95%;height:95%;overflow:hidden;left:0;top:0">')
	}
	</script>
	<script language="JavaScript1.2" src="Trailimage.js" type="text/javascript"></script>
			<?
			echo '<Center><table id="Tableau_01" width="90%" border="1" cellpadding="0" cellspacing="0">';
			echo '<tr>';
			echo '	    <td height="15" colspan="4" align="center" valign="middle" class="Style8">Nos Collections </td>';
			echo '</tr>';
			//si on a récupéré un résultat on l'affiche
			if ($total)
				{
				//début du tableau	
				while($row =mysql_fetch_array($req))
					{	 
 
						echo '<tr valign="middle">';						
						echo '	<td width="160" height="160" valign="top">';
						echo '		<table width="100%" cellpadding="0" cellspacing="0">';
						echo '			<tr valign="middle">';
						echo '				<td width="145" height="145" valign="middle" align="center"><a href="panier/liste_article.php?collection='.$row['id'].'"><img src="miniature.php?pic=collections/'.$row['img_coll'].'&w_max=140&h_max=140" hspaces="5" border="0" alt="'.$row['nom_coll'].'" title="'.$row['nom_coll'].'" onMouseOver="showtrail(400,0,\'collections/'.$row['img_coll'].'\')" onmouseout="hidetrail();"></a></td>';
						echo '			</tr>';
						echo '			<tr>';
						echo '				<td height="20" valign="middle" align="center" class="all Style9"><span class="Style10">'.$row['nom_coll'].'</span></td>';
						echo '			</tr>';
						echo '		</table>';
						echo '	</td>';
						if($row = mysql_fetch_array($req))
						{
							echo '	<td width="160" height="160" valign="top">';
							echo '		<table width="100%" cellpadding="0" cellspacing="0">';
							echo '			<tr valign="middle">';
							echo '				<td width="145" height="145" valign="middle" align="center"><a href="liste_cartes.php?collection='.$row['id'].'"><img src="miniature.php?pic=collections/'.$row['img_coll'].'&w_max=140&h_max=140" hspaces="5" border="0" alt="'.$row['nom_coll'].'" title="'.$row['nom_coll'].'" onMouseOver="showtrail(400,0,\'collections/'.$row['img_coll'].'\')" onmouseout="hidetrail();"></a></td>';
							echo '			</tr>';
							echo '			<tr>';
							echo '				<td height="20" valign="middle" align="center" class="all Style9"><span class="Style10">'.$row['nom_coll'].'</span></td>';
							echo '			</tr>';
							echo '		</table>';
							echo '	</td>';
						}
						if ($row = mysql_fetch_array($req))
						{
							echo '	<td width="160" height="160" valign="top">';
							echo '		<table width="100%" cellpadding="0" cellspacing="0">';
							echo '			<tr valign="middle">';
							echo '				<td width="145" height="145" valign="middle" align="center"><a href="liste_cartes.php?collection='.$row['id'].'"><img src="miniature.php?pic=collections/'.$row['img_coll'].'&w_max=140&h_max=140" hspaces="5" border="0" alt="'.$row['nom_coll'].'" title="'.$row['nom_coll'].'" onMouseOver="showtrail(400,0,\'collections/'.$row['img_coll'].'\')" onmouseout="hidetrail();"></a></td>';
							echo '			</tr>';
							echo '			<tr>';
							echo '				<td height="20" valign="middle" align="center" class="all Style9"><span class="Style10">'.$row['nom_coll'].'</span></td>';
							echo '			</tr>';
							echo '		</table>';
							echo '	</td>';	
						}
						if ($row = mysql_fetch_array($req))
						{
							echo '	<td width="160" height="160" valign="top" align="center">';
							echo '		<table width="100%" cellpadding="0" cellspacing="0">';
							echo '			<tr valign="middle">';
							echo '				<td width="145" height="145" valign="middle" align="center"><a href="liste_cartes.php?collection='.$row['id'].'"><img src="miniature.php?pic=collections/'.$row['img_coll'].'&w_max=140&h_max=140" hspaces="5" border="0" alt="'.$row['nom_coll'].'" title="'.$row['nom_coll'].'" onMouseOver="showtrail(400,0,\'collections/'.$row['img_coll'].'\')" onmouseout="hidetrail();"></a></td>';
							echo '			</tr>';
							echo '			<tr>';
							echo '				<td height="20" valign="middle" align="center" class="all Style9"><span class="Style10">'.$row['nom_coll'].'</span></td>';
							echo '			</tr>';
							echo '		</table>';
							echo '	</td>';
						}
						echo '</tr>';
					}
				}
 
			echo '</table></center>';
			?>
 
	<script language="JavaScript1.2" type="text/javascript">
	if (iens6)
	document.write('</div></div>')
	</script>
	<tr>
		<td height="26" colspan="2" align="center" valign="bottom"><a href="#" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)" alt="D&eacute;placer vers le haut" title="D&eacute;placer vers le haut"><img src="images/haut_1.gif" border="0" /></a>  <a href="#" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)" alt="D&eacute;placer vers le bas" title="D&eacute;placer vers le bas"><img src="images/bas_1.gif" border="0" /></a></td>
	</tr>
 
	<script language="JavaScript" type="text/javascript">
	if (iens6){
	var crossobj=document.getElementById? document.getElementById("content") : document.all.content
	var contentheight=crossobj.offsetHeight-163
	}
	else if (ns4){
	var crossobj=document.nscontainer.document.nscontent
	var contentheight=crossobj.clip.height-163
	}
 
	function movedown(){
	if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
	crossobj.style.top=parseInt(crossobj.style.top)-speed
	else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
	crossobj.top-=speed
	movedownvar=setTimeout("movedown()",100)
	}
 
	function moveup(){
	if (iens6&&parseInt(crossobj.style.top)<=0)
	crossobj.style.top=parseInt(crossobj.style.top)+speed
	else if (ns4&&crossobj.top<=0)
	crossobj.top+=speed
	moveupvar=setTimeout("moveup()",100)
 
	}
 
	function getcontent_height(){
	if (iens6)
	contentheight=crossobj.offsetHeight-163
	else if (ns4)
	document.nscontainer.document.nscontent.visibility="show"
	}
	window.onload=getcontent_height-163
	</script>		
</center>
</body>
</html>

Merci de votre aide

Une dernière chose, IE me met une erreur au niveau de la ligne 90 : if($row = mysql_fetch_array($req)), why that.

Est ce que IE serait une m... innomable face à FF ou c moi qui merde totalement, et je devrais stopper la céation de sites????

**Ouach** · 25/05/2007, 09h18

Quel est le message d'erreur à la ligne 90?

**lelapinou** · 25/05/2007, 10h21

Salut merci pour vos réponses elles m'ont aidé à mieux comprendre, et surtout mieux regarder mon code.

Par contre, je ne sais pas si vous utilisez IE ou FF (ou les 2, ce serait le top) mais j'aimerais bien si vous avez 5 min, d'aller regarder sur Collections pour voir pourquoi il y a ces différences d'affichage entre IE et FF.
Sous FF mes images sont super bien centrées, alors que sous IE rien à faire, elles sont cadrées à gauche.
Ensuite quand on clic sur une collection on va vers la visu des différents articles de la collection, et là pareil pour l'affichage, sauf que sous IE j'ai une erreur.

Je me suis aperçu que lorsque j'agrandissait la zone d'affichage de mes images j'avais des soucis (notemment celui de l'affichage du zoom), mais je ne comprend pas pourquoi. On m'avait parlé des DOCTYPE, et il est vrai qu'il n'y en a pas sur mes pages, mais si j'en mets un c le bordel, plus rien ne s'affiche, j'ai beau lire des docs là dessus je comprend toujours pas pourquoi ça fonctionne pas.
Merci à vous

**Ouach** · 25/05/2007, 10h47

Voici quelques remarques (pas LA solution)
- Y a-t-il encore beaucoup de visiteurs avec ns4?
- A la ligne 138, il y a une balise tr en dehors d'un tableau.
- Les scripts javascript devrait se trouver dans la balise head.
- Deux div imbriqués? Pourquoi?
- Le lien vers la première image n'est pas le même que ceux des autres.
- Dans la page générale (celle qui contient l'iframe), le tableau général devrait être à 95% pour ne pas avoir le texte sur le bord de la fenêtre.

**lelapinou** · 25/05/2007, 10h59

Envoyé par Ouach

Voici quelques remarques (pas LA solution)
- Y a-t-il encore beaucoup de visiteurs avec ns4?

pour le NS4 je ne sais pas, mais je suis justement entrain de regarder si le code des div n'est pas différent entre IE et FF, j'ai un script qui affiche une horloge analogique qui gère justement ces différences et je vois que sous IE ils font une imbrication de 3 div alors que pour FF il n'y a qu'un div.

Envoyé par Ouach

- A la ligne 138, il y a une balise tr en dehors d'un tableau.

ok je regarde

Envoyé par Ouach

- Les scripts javascript devrait se trouver dans la balise head.

yes of course

Envoyé par Ouach

- Deux div imbriqués? Pourquoi?

ces div imbriqués c'est pour l'effet de déroulement de la page, ainsi le div internet défile dans le div externe.

Envoyé par Ouach

- Le lien vers la première image n'est pas le même que ceux des autres.

Oui j'ai pas fait encore tous les liens. Seulement quand ça fonctionnera